flutter_settings 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • new54

flutter_settings #

Build Status License: MIT Pub

This package provides some settings widget to use it in your settings screen.

  • it has the most widgets which have been used in any settings screen, now you can customize yours.
  • it offers full LTR and RTL support for apps of all languages.

Package Presentation #

Image

You can check out the whole code of this exmaple through this link.

Break it out #

I'll break it out and show you the different widget which you can use and customize your widget.

SettingsButton Widget #

Button widget is the most important widget at any screen, it has some properties like:

  • Title (required): title for your button to make it your button behavior clear to your end user.
  • caption (optional): a small explanation which provide more info about your button behavior.
  • icon (optional): that makes your button more pretty and descriptive, its background and IconDate and its color are changeable, feel free to make your Icon.
  • onPressed (required): call back function which delegete the pressing action.
  • direction (optional): which specify the arrangement of the widgets in the button, it will be LTR or RTL, by default its value is LTR.
  • titleStyle (optional): customize your button title.
  • captionStyle (optional): customize your button caption.

Example

Image

import 'package:flutter_settings/widgets/SettingsButton.dart';

 SettingsButton(
                title: "Wi-Fi",
                caption: "caffe wifi",
                icon: new SettingsIcon(
                  icon: Icons.wifi,
                  backgroundColor: Colors.blue,
                ), 
                onPressed: () {
                  //Toast.show("Wi-Fi is pressed", context);
                },
              )

SettingsCheckBox Widget #

SettingsCheckBox is widget which provides [on, off] choose, it has some properties SettingsButton and an additional properties like:

  • value (required): init value for widget to make it on or off
  • type (optional): which shape you need to use in your widget(CheckBox , Switch).[there is some shapes will be made in the future], it is CheckBox by default.

Example

Image

import 'package:flutter_settings/widgets/SettingsCheckBox.dart';

 SettingsCheckBox(
                title: 'Display network speed',
                icon: new SettingsIcon(
                    //a custom icon please check out this custom_icons.dart
                  icon: CustomIcons.gauge,
                  color: Colors.blueAccent,
                ),
                onPressed: (bool value) {
                  //Toast.show("Display network speed is " + value.toString(),
                  //    context);
                },
                value: true,
                type: CheckBoxWidgetType.Switch,
              ),

SettingsNavigatorButton Widget #

SettingsNavigatorButton is widget which navigate to another widget once the user press on it, it also has properties like SettingsButton except onPress property, it has an additional properity:

  • context (required): your current context which the widget uses it
  • targetWidget (required): the widget you need to move on once clicking on the widget.

Example

Image

import 'package:flutter_settings/widgets/SettingsNavigatorButton.dart';

  SettingsNavigatorButton(
                title: SettingsLocalizations.of(context).translate('More'),
                icon: new SettingsIcon(
                  icon: Icons.more_horiz,
                  backgroundColor: Colors.orange,
                ), 
                context: context,
                //replace it with your widget which need to move on.
                targetWidget: WireLessNetworkAllSettings(), 
              ),

SettingsInputField Widget #

SettingsInputField is a widget that gets input from the user through dialog and returns the user input to do the related app business logic, it has properties like SettingsButton, it has an additional properity:

  • context (required): your current context which the widget uses it
  • dialogTitle (optional): title for input dialog widget.
  • dialogButtonText (optional): text of the button that confirm user input.
  • keyboardType (optional): TextInputType which decides the type that will be used to take input from the user.

Example

  • Settings Input field Button

Image

  • Settings Input field Dialog

Image

import 'package:flutter_settings/widgets/SettingsInputField.dart';

  SettingsInputField(
                dialogButtonText: 'Done',
                title: 'Edit SIM name',
                caption: 'SIM 1' //_simCaption,
                onPressed: (value) {
                  if (value.toString().isNotEmpty) {
                    //Toast.show("You have Entered " + value, context);
                    //setState(() {
                    //  _simCaption = value; } );
                  }
                },
                context: context,
              ),

SettingsSelectionList Widget #

SettingsSelectionList is a widget that gets one choose from the user through a dialog which has a list of choices and returns it with its index, to do the related app business logic, it has properties like SettingsButton except OnPress() callback, it has an additional properity:

  • context (required): your current context which the widget uses it.
  • onSelect(item , idex) (required): function callback to receive the chosen item and its index.
  • chosenItemIndex (optional): default selected item, it will be the first item by default.
  • dialogTitle (optional): title for selection list dialog widget, it takes the title of button by default.
  • dismissTitleText (optional): text of the button that cancels choosing, it takes the "Cancel" value by default.

Example

  • Settings Input field Button

Image

  • Settings Input field Dialog

Image

import 'package:flutter_settings/widgets/SettingsSelectionList.dart'; Create List of items

    var turnOffList = new List<SettingsSelectionItem<int>>();
    turnOffList.add(SettingsSelectionItem<int>(0, "15 seconds"));
    turnOffList.add(SettingsSelectionItem<int>(1, "30 seconds"));
    turnOffList.add(SettingsSelectionItem<int>(2, "1 minute"));
    turnOffList.add(SettingsSelectionItem<int>(3, "5  minutes"));
    turnOffList.add(SettingsSelectionItem<int>(4, "10 minutes"));

Set the created list to the widget

  SettingsSelectionList<int>(
                items: turnOffList,
                chosenItemIndex: 1,
                title:  'Turn off screen automatically',
                dismissTitle: 'Cancel',
                caption: _caption,
                icon: new SettingsIcon(
                  icon: Icons.alarm_off,
                  color: Colors.blue,
                ),
                onSelect: (value, index) {
                  // Toast.show("You have selected " + value.text.toString(),
                 //      context);
                 /* setState(() {
                    _selectionIndex = index;
                    _caption = "After  " + value.text +"  of inactivity";
                  });*/
                },
                context: context,
              ),

SettingsSlider Widget #

SettingsSlider can be used to select a continuous value from 0.0 to 1.0, it has an special properities like:

  • value (required): The currently selected value for this widget.
  • onChange (required): Callback which called during a drag when the user is selecting a new value.
  • onChangeEnd (optional): Callback which called when the user is done selecting a new value.
  • onChangeStart (optional): Callback which called when the user starts selecting a new value.
  • activeColor(optianal): The color to use for the portion of the slider track that is active.
  • icon (optional): that makes your button more pretty and descriptive, its background and IconDate and its color are changeable, feel free to make your Icon.
  • direction (optional): which specify the arrangement of the widgets in the button, it will be LTR or RTL, by default its value is LTR. Example

Image

import 'package:flutter_settings/widgets/SettingsNavigatorButton.dart';

  SettingsSlider(
                value: 0.5,
                activeColor: Colors.blue,
                icon: new SettingsIcon(
                  icon: Icons.brightness_7,
                  color: Colors.red,
                  text:'Brightness',
                ),
                onChange: (value) {
                  //Toast.show("now the brightness value becomes " +
                    //      value.toString(), context);
                },
              ),

SettingsIcon Widget #

SettingsIcon which could be used in all Settings widgets, it provides some shapes to could use it in a lot of cases, it has some properties that make it customizable like:

  • icon (required): The icon to display, it IconData object.
  • color (optional): The color to use when drawing the icon, it uses white color by default.
  • backgroundColor (optional): The background color to the Icon.
  • text (optional): text to make your icon more descriptive if it need that.

Example

Image

import 'package:flutter_settings/widgets/SettingsIcon.dart';

  • First Icon
    SettingsIcon(
              icon: Icons.brightness_7,
              color: Colors.red,
              text: 'Brightness',
              ),
    
  • Second Icon
     SettingsIcon(
              icon: Icons.more_horiz,
              backgroundColor: Colors.orange,
              ),
    
  • Third Icon
     SettingsIcon(
              icon: Icons.phone_android,
              color: Colors.blueGrey,
              ),
      ``    
    

Its offers LTR and RTL support for apps of all languages. #

If your app uses LTR in language and RTL in another languuage like[Arabic], don't worry it handle this case, just let's take an example.

Left to Right #

just assign direction property in your widget to WidgetDirection.ltr or don't assign anything, it WidgetDirection.ltr by default.

Example

Image

Right to Left #

here, you need to assign direction property in your widget to WidgetDirection.rtl.

Example

Image


How can I collaborate on this package? #

I'll tell you soon. #

License #

MIT

[1.0.0] - 10/25/2019.

  • First version has 6 settings widgets(Button, CheckBox, Navigator, InputField, SelectionList).

[1.0.1] - 10/25/2019.

  • Just working on the health of the package.

[1.0.2] - 10/30/2019.

  • Update readme file.

example/README.md

example #

A new Flutter application.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_settings: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_settings/button/settings_button_layer.dart';
import 'package:flutter_settings/checkbox/layer/checkbox_layer.dart';
import 'package:flutter_settings/checkbox/settings_checkbox_factory.dart';
import 'package:flutter_settings/checkbox/shapes/square_checkbox_shape.dart';
import 'package:flutter_settings/checkbox/shapes/switch_checkbox_shape.dart';
import 'package:flutter_settings/inputField/base/base_input_dialog.dart';
import 'package:flutter_settings/inputField/dialogs/simple_input_dialog.dart';
import 'package:flutter_settings/inputField/input_dialog_factory.dart';
import 'package:flutter_settings/list/items/selection_check_item.dart';
import 'package:flutter_settings/list/items/selection_item_factory.dart';
import 'package:flutter_settings/list/items/selection_radio_item.dart';
import 'package:flutter_settings/list/selection_dialogs/SimpleSelectionDialog.dart';
import 'package:flutter_settings/models/settings_list_item.dart';
import 'package:flutter_settings/navigator/base/base_navigator_shape.dart';
import 'package:flutter_settings/navigator/layer/navigator_layer.dart';
import 'package:flutter_settings/navigator/shapes/arrow_navigator_shape.dart';
import 'package:flutter_settings/slider/slider_layer.dart';
import 'package:flutter_settings/util/SettingsConstants.dart';
import 'package:flutter_settings/widgets/BaseWidget.dart';
import 'package:flutter_settings/widgets/Separator.dart';
import 'package:flutter_settings/widgets/SettingsButton.dart';
import 'package:flutter_settings/widgets/SettingsCheckBox.dart';
import 'package:flutter_settings/widgets/SettingsIcon.dart';
import 'package:flutter_settings/widgets/SettingsInputField.dart';
import 'package:flutter_settings/widgets/SettingsNavigatorButton.dart';
import 'package:flutter_settings/widgets/SettingsSection.dart';
import 'package:flutter_settings/widgets/SettingsSelectionList.dart';
import 'package:flutter_settings/widgets/SettingsSlider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
11
Health:
Code health derived from static analysis. [more]
96
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
54
Learn more about scoring.

We analyzed this package on Nov 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/list/selection_dialogs/SimpleSelectionDialog.dart. (-0.50 points)

Analysis of lib/list/selection_dialogs/SimpleSelectionDialog.dart reported 1 hint:

line 6 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: SimpleSelectionDialog.chosenItemIndex

Fix lib/widgets/BaseWidget.dart. (-0.50 points)

Analysis of lib/widgets/BaseWidget.dart reported 1 hint:

line 6 col 16: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: BaseWidget.onPressed

Fix lib/widgets/SettingsButton.dart. (-0.50 points)

Analysis of lib/widgets/SettingsButton.dart reported 1 hint:

line 8 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: BaseWidget.onPressed

Fix additional 10 files with analysis or formatting issues. (-2.50 points)

Additional issues in the following files:

  • lib/widgets/SettingsCheckBox.dart (1 hint)
  • lib/widgets/SettingsInputField.dart (1 hint)
  • lib/widgets/SettingsNavigatorButton.dart (1 hint)
  • lib/widgets/SettingsSelectionList.dart (1 hint)
  • lib/widgets/SettingsSlider.dart (1 hint)
  • lib/inputField/input_dialog_factory.dart (Run flutter format to format lib/inputField/input_dialog_factory.dart.)
  • lib/list/items/selection_item_factory.dart (Run flutter format to format lib/list/items/selection_item_factory.dart.)
  • lib/models/settings_list_item.dart (Run flutter format to format lib/models/settings_list_item.dart.)
  • lib/navigator/base/base_navigator_shape.dart (Run flutter format to format lib/navigator/base/base_navigator_shape.dart.)
  • lib/slider/slider_layer.dart (Run flutter format to format lib/slider/slider_layer.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
toast ^0.1.5 0.1.5
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test