flutter_util_widgets 1.0.5+3

  • Readme
  • Changelog
  • Example
  • Installing
  • 68

flutter_util_widgets.dart #

pub package License: MIT Build Status

A flutter package that provides a variety of useful widgets. It's constantly updated.

Install the package #

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

flutter_util_widgets: ^1.0.5+3

2. Update dependencies: #

You can install packages from the command line:

$ flutter pub get

3. Import it on your app #

Now in your Dart code, you can use:

import 'package:flutter_util_widgets/flutter_util_widgets.dart';

Using the package #

1. Switcher widget:

Screenshot:
Code:
import 'package:flutter/material.dart';

import 'package:flutter_util_widgets/flutter_util_widgets.dart';

class SwitcherExample extends StatefulWidget {
  @override
  _SwitcherExampleState createState() => _SwitcherExampleState();
}

class _SwitcherExampleState extends State<SwitcherExample> {
  bool squared = false;
  bool rounded = false;
  bool withLabel = false;
  bool withLabelRounded = false;
  bool customActiveColor = false;
  bool customDisabledColorAndAlignment = false;

  void setNewValue(Function(bool, bool) apply, bool value, bool newValue) {
    setState(() {
      apply(value, newValue);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Switcher Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    'Squared',
                  ),
                ),
                Switcher(
                  value: squared,
                  onChange: (value) {
                    setNewValue((let, val) => squared = value, squared, value);
                  },
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    'Rounded',
                  ),
                ),
                Switcher.rounded(
                  value: rounded,
                  onChange: (value) {
                    setNewValue((let, val) => rounded = value, rounded, value);
                  },
                ),
              ],
            ),
            Switcher.label(
              label: 'With label',
              value: withLabel,
              onChange: (value) {
                setNewValue((let, val) => withLabel = value, withLabel, value);
              },
            ),
            Switcher.labelAndRounded(
              label: 'With label and rounded',
              value: withLabelRounded,
              onChange: (value) {
                setNewValue((let, val) => withLabelRounded = value, withLabelRounded,
                    value);
              },
            ),
            Switcher.label(
              value: customActiveColor,
              label: 'Customizing active color and label style',
              labelStyle: TextStyle(color: Theme.of(context).primaryColor),
              activeColor: Colors.amber,
              onChange: (value) {
                setNewValue((let, val) => customActiveColor = value,
                    customActiveColor, value);
              },
            ),
            Switcher.labelAndRounded(
              mainAxisAlignment: MainAxisAlignment.end,
              label: 'Customizing disabled color and alignment',
              disableColor: Colors.blueGrey[300],
              value: customDisabledColorAndAlignment,
              onChange: (value) {
                setNewValue((let, val) => customDisabledColorAndAlignment = value,
                    customDisabledColorAndAlignment, value);
              },
            ),
            const Divider(),
            const Text(
              'Current values:',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text('Squared: $squared'),
            Text('Rounded: $rounded'),
            Text('With label: $withLabel'),
            Text('With label and rounded: $withLabelRounded'),
            Text('Customizing active color and label style: $customActiveColor'),
            Text('Customizing disabled color and alignment: $customDisabledColorAndAlignment'),
          ],
        ),
      ),
    );
  }
}

1. OneTypeSelector widget:

Screenshot:
Code:
Class Person:
class Person {
  final String name;
  DateTime birthMonth;
  bool isSingle;
  String favoriteAnime;
  String favoriteCharacter;

  Person(this.name);

  @override
  String toString() {
    return 'Name: $name - Birth month: ${birthMonth?.month} - Is single: $isSingle - Favorite anime: $favoriteAnime - Favorite character: $favoriteCharacter';
  }
}
import 'package:flutter/material.dart';

import 'package:flutter_util_widgets/flutter_util_widgets.dart';

const TextStyle _bold = TextStyle(fontWeight: FontWeight.bold);

class OneTypeSelectorExample extends StatefulWidget {
  @override
  _OneTypeSelectorExampleState createState() => _OneTypeSelectorExampleState();
}

class _OneTypeSelectorExampleState extends State<OneTypeSelectorExample> {
  Person otaku = Person('Otaku Sr.');
  Person p1 = Person('Person 1');
  Person p2 = Person('Person 2');
  Person selected;

  List<String> characters = [
    'Eren Yeager',
    'Kurozaki Ichigo',
    'Uzumaki Naruto',
    'Son Goku',
    'Kamado Tanjiro',
  ];

  List<String> animes = [
    'Attack on Titan',
    'Bleach',
    'Naruto',
    'Dragon Ball Z',
    'Demon Slayer',
  ];

  List<DateTime> months = [
    month(DateTime.january),
    month(DateTime.february),
    month(DateTime.march),
    month(DateTime.april),
    month(DateTime.may),
    month(DateTime.june),
    month(DateTime.july),
    month(DateTime.august),
    month(DateTime.september),
    month(DateTime.october),
    month(DateTime.november),
    month(DateTime.december),
  ];

  /// Aux method to get <current-year> - MONTH - <first-day-of-month>
  static DateTime month(int month) => DateTime(DateTime.now().year, month, 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('One Type Selector Example'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const Text('Favorite character?', style: _bold),
                const SizedBox(height: 4.0),
                OneTypeSelector<String>(
                  value: otaku.favoriteCharacter,
                  options: characters,
                  onValueChanged: (String value) {
                    setState(() {
                      this.otaku.favoriteCharacter = value;
                    });
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const Text('Favorite anime?', style: _bold),
                const SizedBox(height: 4.0),
                OneTypeSelector<String>(
                  value: otaku.favoriteAnime,
                  options: animes,
                  optionWidth: 150.0,
                  toggleOptionOnTap: true,
                  separatorWidth: 0.0,
                  contentPadding: const EdgeInsets.all(4.0),
                  onValueChanged: (String value) {
                    setState(() {
                      this.otaku.favoriteAnime = value;
                    });
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const Text('Birth month?', style: _bold),
                const SizedBox(height: 4.0),
                OneTypeSelector<DateTime>.rect(
                  value: otaku.birthMonth,
                  options: months,
                  activeColor: Colors.amber,
                  onValueChanged: (DateTime value) {
                    setState(() {
                      this.otaku.birthMonth = value;
                    });
                  },
                  setValueLabel: (DateTime value) {
                    return value.month.toString().padLeft(2, '0');
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const Text('Is single?', style: _bold),
                const SizedBox(height: 4.0),
                OneTypeSelector<bool>(
                  value: otaku.isSingle,
                  options: [true, false],
                  onValueChanged: (bool value) {
                    setState(() {
                      this.otaku.isSingle = value;
                    });
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const Text('Select a person?', style: bolded),
                const SizedBox(height: 4.0),
                OneTypeSelector<Person>(
                  value: selected,
                  options: [p1, p2],
                  setValueLabel: (person) => person.name,
                  comparingBy: (person) => person.name,
                  onValueChanged: (Person value) {
                    setState(() {
                      this.selected = value;
                    });
                  },
                ),
              ],
            ),
          ),
          const Divider(),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Who am I?',
                  style: bolded.copyWith(color: Theme.of(context).accentColor),
                ),
                viewValues('Name: ', otaku.name),
                viewValues('Favorite character: ', otaku.favoriteCharacter),
                viewValues('Favorite anime: ', otaku.favoriteAnime),
                viewValues('Birth month: ', otaku.birthMonth?.month),
                viewValues('Is single: ', otaku.isSingle),
                viewValues('Selected person: ', selected?.name),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

[1.0.0] - April, 25, 2020. #

  • Adding Switcher widget.

[1.0.1] - April, 25, 2020. #

  • Adding new customization options to Switcher widget.

[1.0.2] - April, 25, 2020. #

  • Updating README.md with examples of Switcher widget usage.

[1.0.3] - April, 25, 2020. #

  • Updating README.md with screenshot of Switcher widget usage.

[1.0.4] - April, 25, 2020. #

  • Isolating Switcher widget.

[1.0.5] - April, 25, 2020. #

  • Repair screenshot of Switcher.

[1.0.5+1] - April, 27, 2020. #

  • Reformat switcher_widget.

[1.0.5+2] - May, 16, 2020. #

  • Introduce OneTypeSelector widget.
  • Remove state of Switcher widget.
  • Rearrange the example project structure.

[1.0.5+3] - Jun, 10, 2020. #

  • Adding comparingBy function to OneTypeSelector widget.

example/lib/main.dart

import 'package:flutter/material.dart';

import './one_type_selector_example.dart';
import './switcher_example.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: Router());
  }
}

class Router extends StatefulWidget {
  @override
  _RouterState createState() => _RouterState();
}

class _RouterState extends State<Router> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
      color: Colors.blueGrey.shade900,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          RaisedButton(
            child: const Text('Switcher'),
            onPressed: () {
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => SwitcherExample()));
            },
          ),
          RaisedButton(
            child: const Text('One Type Selector'),
            onPressed: () {
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => OneTypeSelectorExample()));
            },
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_util_widgets: ^1.0.5+3

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_util_widgets/flutter_util_widgets.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
36
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
68
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_util_widgets that is a package requiring null.

Health suggestions

Fix lib/widgets/input/switcher/switcher.dart. (-0.50 points)

Analysis of lib/widgets/input/switcher/switcher.dart reported 1 hint:

line 16 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: Switcher.label, Switcher.labelStyle, Switcher.mainAxisAlignment

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test