Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Overview

Flutter Material Color Picker pub package

Material Color picker is a Flutter widget, that can be customizable.

By default, it's Material Colors, but you can define your own colors.

You can also use CircleColor widget to display color in your app. Example, you can set the color picker in a dialog and display the selected color in a ListTile, for settings.

How to use it

These examples use a static color for 'selectedColor', but you can use a variable (state)

Add to your Flutter project

You just need to add flutter_material_color_picker as a dependency in your pubspec.yaml file.

flutter_material_color_picker: ^1.1.0+2

Import

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

Basic

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    selectedColor: Colors.red
)

Listen main color changes

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    onMainColorChange: (ColorSwatch color) {
        // Handle main color changes
    },
    selectedColor: Colors.red
)

Disallow Shades

MaterialColorPicker(
    allowShades: false, // default true
    onMainColorChange: (ColorSwatch color) {
        // Handle main color changes
    },
    selectedColor: Colors.red
)

If allowShades is set to false then only main colors will be shown and allowed to be selected. onColorChange will not be called, use onMainColorChange instead.

Custom colors

In this example, custom colors are a list of Material Colors (class who extend of ColorSwatch). But you can create your own list of ColorSwatch.

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    selectedColor: Colors.red,
    colors: [
        Colors.red,
        Colors.deepOrange,
        Colors.yellow,
        Colors.lightGreen
    ],
)

Screenshot

Color selection

There is two step, first choose the main color, and when you press it, you have to choose a shade of the main color. By default it's all Material Colors, but you can define custom colors, a list of ColorSwatch.

Example of usages

You can insert the color picker into a Dialog

Display color

You can use CircleColor widget, to display the selected color into your settings for example.

Comments
  • _onMainColorSelected calls both onMainColorChange and onColorChange

    _onMainColorSelected calls both onMainColorChange and onColorChange

    https://github.com/Pyozer/flutter_material_color_picker/blob/master/lib/src/material_color_picker.dart#L97

    I don't think is ideal behavior because onColorChange will be triggered before the specific shade Color is even selected.

    For example, I want to Navigator.pop() the color onColorChange and the dialog is closed early because onColorChange is triggered _onMainColorSelected()

    opened by stanchanpsu 6
  • Fixing Padding

    Fixing Padding

    Changes

    Changed the padding within the shades widget.

    Reason

    Noticed that the colours were pushed together on a smaller display

    Usage

    My File Manager Project

    opened by Nexushunter 4
  • Add onBack prop

    Add onBack prop

    It would be greate if you can add a "onBack () {}" prop for MaterialColorPicker. I need to catch when the users press the back button and from what I see there is no option. Thank you!

    enhancement 
    opened by xylish7 3
  • Programmatically set color?

    Programmatically set color?

    Inside AlertDialog I have TypeAheadFormField (from flutter_typeahead) and MaterialColorPicker:

    MaterialColorPicker(
    	onMainColorChange: (ColorSwatch color) {
    		this._myColor = color;
    	},
    	selectedColor: _myColor,
    )
    ...
    onSuggestionSelected: (validColorInt) {
    	this._textController.text = 'THE TEXT IS UPDATED';
    
    	setState(() {
    		this._myColor = Color(validColorInt); // BUT NOT THE PICKER
    	});
    }
    

    I want to change the picker's selected color when the user makes a selection. What do I miss?

    opened by wiradikusuma 1
  • Add allowShades property

    Add allowShades property

    This allows the user to choose if they want shades to be allowed at all. Defaults to true. Also controls the onColorChange callback, which can't be used in conjunction with allowShades: false. Users would use only onMainColorChange instead.

    I can update the docs and change list if you accept this PR.

    opened by stanchanpsu 1
  • Padding is missing at bottom

    Padding is missing at bottom

    Hello I really like your widget but I found a little problem: Padding is missing the lower part of the widget therefore the shadows are cut image this is the part which is causing the problem: padding: const EdgeInsets.only(left: _kContainerPadding, right: _kContainerPadding),

    By adding Padding to all parts the problem is fixed padding: const EdgeInsets.all(_kContainerPadding), image

    opened by dario-digregorio 1
  • Doesn't have black color option

    Doesn't have black color option

    Hi, I've tried to use black in the selectedColor param, but it doesn't really select anything, also when I took Colors.black to to colors list, i've got an error.

    How is it possible to have black as an option?

    Thanks, Ben

    opened by Tremx389 1
  • Crash on call

    Crash on call

    dependencies: flutter_material_color_picker: ^1.0.5

    Code sample from examples MaterialColorPicker( onColorChange: (Color color) { // Handle color changes }, selectedColor: Colors.red, colors: [ Colors.red, Colors.deepOrange, Colors.yellow, Colors.lightGreen ], )

    The relevant error-causing widget was: MaterialColorPicker When the exception was thrown, this was the stack: #2 RenderBox.size (package:flutter/src/rendering/box.dart:1694:12) #3 RenderBox.paintBounds (package:flutter/src/rendering/box.dart:2288:41) #4 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:134:58) #5 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:95:5) #6 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:201:7) ... The following RenderObject was being processed when the exception was fired: RenderConstrainedBox#51f51 relayoutBoundary=up3 ... needs compositing ... parentData: offset=Offset(0.0, 0.0) (can use size) ... constraints: BoxConstraints(0.0<=w<=379.4, 0.0<=h<=Infinity) ... size: MISSING ... additionalConstraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity) RenderObject: RenderConstrainedBox#51f51 relayoutBoundary=up3 needs compositing parentData: offset=Offset(0.0, 0.0) (can use size) constraints: BoxConstraints(0.0<=w<=379.4, 0.0<=h<=Infinity) size: MISSING additionalConstraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity) ... child: RenderRepaintBoundary#deafb relayoutBoundary=up4 NEEDS-PAINT ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity) ... layer: OffsetLayer#3e4d5 DETACHED ... engine layer: Null#007db ... offset: Offset(0.0, 0.0) ... size: MISSING ... metrics: 0.0% useful (1 bad vs 0 good) ... diagnosis: insufficient data to draw conclusion (less than five repaints) ... child: RenderCustomPaint#75049 relayoutBoundary=up5 NEEDS-PAINT ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity) ... size: MISSING ... child: RenderRepaintBoundary#b9ef3 relayoutBoundary=up6 NEEDS-PAINT ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity) ... size: MISSING ... usefulness ratio: no metrics collected yet (never painted) ... child: _RenderScrollSemantics#4b074 relayoutBoundary=up7 NEEDS-PAINT ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity) ... semantic boundary ... size: MISSING

    opened by fregate 0
  • onlyShadeSelection option

    onlyShadeSelection option

    When the onlyShadeSelection option is set to true it will only emit changes coming from the shade selection.

    This is nessecary when changing the selectedColor of the colorpicker depending on what it emits. Without the change the mainColor would be selected, emitted through onColorChange and onMainColorChange. The colors couldn't be differentiated and had to be set, thus skipping / ignoring the shade selection that also offers the main color.

    Might be wise to make it the default for onColorChange and keep emitting changes of MainColor to onMainColorChange

    opened by MSchmack 0
  • MaterialColorPicker not working in Dialog

    MaterialColorPicker not working in Dialog

    When trying to place this color picker widget inside of an AlertDialog or SimpleDialog, an exception is raised.

    However, be aware that since AlertDialog tries to size itself using the intrinsic dimensions of its children, widgets such as ListView, GridView, and CustomScrollView, which use lazy viewports, will not work. -- Flutter docs

    Would be great if there was support for this.

    opened by ckaotik 1
  • my error : The getter 'dx' was called on null. Receiver: null Tried calling: dx

    my error : The getter 'dx' was called on null. Receiver: null Tried calling: dx

    my code:

    import 'dart:math';

    import 'package:animated_theme_switcher/animated_theme_switcher.dart'; import 'package:appservice/flavors.dart'; import 'package:appservice/helper/dbhelper.dart'; import 'package:appservice/models/localappconfig.dart'; import 'package:appservice/pages/home_page.dart'; import 'package:appservice/services/createtable_services.dart'; import 'package:appservice/widgets/common_snackbar.dart'; import 'package:appservice/widgets/settings/settings_ui_data.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_material_color_picker/flutter_material_color_picker.dart'; import 'package:line_awesome_flutter/line_awesome_flutter.dart'; import 'package:progress_dialog/progress_dialog.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';

    import '../helper/helper.dart'; import '../sqliteProvider/userappconfig_provider.dart'; import '../style/style.dart'; import '../utils/uidata.dart';

    class SettingPage extends StatefulWidget { final String accountName; final bool reception;

    const SettingPage({Key key, this.accountName, this.reception}) : super(key: key);

    @override _SettingPageState createState() => _SettingPageState(); }

    class _SettingPageState extends State { ProgressDialog prDialog; Color _shadeColor = Colors.orange[400]; Color _tempShadeColor; ColorSwatch _tempMainColor; ColorSwatch _mainColor = Colors.deepOrange;

    @override void initState() { super.initState(); initData(); }

    @override Widget build(BuildContext context) { // ScreenUtil.init(context, height: 896, width: 414, allowFontScaling: false); return ThemeSwitchingArea( child: Builder( builder: (context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: false, centerTitle: true, title: Text( F.companyInfo.appCompanyName, ), ), body: Column( children: [ SizedBox(height: 30.h), header(), Expanded( child: ListView( children: [ widget.reception ? _widgetGetDataFromSazmani(context) : SizedBox(), _widgetThemeColor(context), _widgetFontSize(), _widgetLogout(context), colorChange(), ], ), ) ], ), ); }, ), ); }

    Future initData() async { prDialog = new ProgressDialog(context, type: ProgressDialogType.Normal, isDismissible: false); prDialog.style( message: 'چند لحظه صبر نمایید ', borderRadius: 10.0, backgroundColor: Colors.white, elevation: 10.0, insetAnimCurve: Curves.easeInOut, progressTextStyle: Style.styleTextBlack(TEXT_SIZE_22, FontWeight.w400), messageTextStyle: Style.styleTextBlack(TEXT_SIZE_30, FontWeight.w400), ); }

    Widget header() { return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox(width: 40.w), GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => Directionality( textDirection: TextDirection.rtl, child: HomePage())), ); }, child: Icon( LineAwesomeIcons.arrow_right, size: ScreenUtil().setSp(50), ), ), profileInfo(), themeSwitcher(), SizedBox(width: 40.w), ], ); }

    Widget profileInfo() { return Expanded( child: Column( children: [ Container( height: 150.h, width: 165.w, margin: EdgeInsets.only(top: 55.h), child: Stack( children: [ CircleAvatar( radius: 80, backgroundImage: AssetImage('assets/images/admin.png'), ), ], ), ), SizedBox(height: 40.h), Text(widget.accountName, style: Style.styleTextBlack(TEXT_SIZE_24, FontWeight.w700)), SizedBox(height: 60.h), Container( height: 70.h, width: 300.w, decoration: BoxDecoration( borderRadius: BorderRadius.circular(30), color: Theme.of(context).accentColor, ), child: widgetDownloadApk(), ), SizedBox(height: 35.h), ], ), ); }

    Widget _widgetGetDataFromSazmani(BuildContext context) { return InkWell( onTap: () { _getdata(context); }, child: _widgetContent("دریافت اطلاعات پذیرش", LineAwesomeIcons.upload), ); }

    Future _getdata(BuildContext context) async { await Helper.isOnline().then((isOnline) async { if (isOnline) { prDialog.show(); bool result = false; double _netserverversion = 0; _netserverversion = await TableService.getVersion(); DbHelper dbHelper = new DbHelper(); var map = await dbHelper.getItem('LocalAppConfig'); LocalAppConfig appConfig = new LocalAppConfig.fromMap(map); if (appConfig != null && appConfig.version == 0) { result = await Helper.getDataSazmaniUntilEnd(_netserverversion); } else if (appConfig != null && appConfig.version != netserverversion) { await TableService.getAlterTable().then(() async { result = await Helper.getDataSazmaniUntilEnd(_netserverversion); }); } else { result = await Helper.getDataSazmaniUntilEnd(_netserverversion); } if (!result) if (prDialog.isShowing()) prDialog.hide(); } else FlushbarHelper.createInformation( context: context, message: "عدم ارتباط با سرور ،مجددا اقدام نمایید.", title: "توجه"); }); }

    Widget widgetDownloadApk() { return InkWell( onTap: _launchURL, child: Row( children: [ SizedBox(width: 45.w), Text( "بروز رسانی ", style: Style.styleTextBlack(TEXT_SIZE_24, FontWeight.w700), ), SizedBox(width: 80.w), Icon( Icons.update_outlined, size: 40.w, ), ], ), ); }

    _launchURL() async { String url = F.companyInfo.urlDownload + 'WebApiB2BDotCore/UploadedFiles/Apk/b2bsorooshan.apk?${Random().nextInt(10000)}'; if (await canLaunch(url)) { await launch(url); } }

    Widget _widgetLogout(BuildContext context) { return Container( child: InkWell( onTap: () { Helper.onConfirmEasyDialog( context, 'خروج', 'آیا از خروج از حساب کاربری اطمینان دارید؟', _logout, _cancel(context)); }, child: _widgetContent( "خروج از حساب کاربری", LineAwesomeIcons.alternate_sign_out), ), ); }

    _logout() { UserAppConfigProvider configProvider = UserAppConfigProvider(); configProvider.logOutUser(1, true).then((value) { Helper.onExit(); }); }

    _cancel(BuildContext context) => Navigator.of(context).pop(true);

    Widget _widgetThemeColor(BuildContext context) { return InkWell( onTap: _openColorPicker, child: _widgetContent( " تغییر رنگ برنامه ", LineAwesomeIcons.paint_roller)); }

    Widget _widgetFontSize() { return InkWell( onTap: () {}, child: _widgetContent( " تغییر سایز فونت ", LineAwesomeIcons.alternate_pencil), ); }

    Widget _widgetContent(String title, IconData icon) { return Container( height: 90.h, margin: EdgeInsets.symmetric( horizontal: 60.w, ).copyWith( bottom: 40.h, ), padding: EdgeInsets.symmetric( horizontal: 50.w, ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(30), color: Theme.of(context).backgroundColor, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text(title, style: Style.styleTextBlack(TEXT_SIZE_24, FontWeight.w700)),

          Icon(
            icon,
            size: 30,
          ),
          // Spacer(),
        ],
      ),
    );
    

    }

    Widget themeSwitcher() { return ThemeSwitcher( builder: (context) { return AnimatedCrossFade( duration: Duration(milliseconds: 200), crossFadeState: ThemeProvider.of(context).brightness == Brightness.dark ? CrossFadeState.showFirst : CrossFadeState.showSecond, firstChild: GestureDetector( onTap: () => ThemeSwitcher.of(context).changeTheme(theme: kLightTheme), child: Icon( LineAwesomeIcons.sun, size: ScreenUtil().setSp(50), ), ), secondChild: GestureDetector( onTap: () => ThemeSwitcher.of(context).changeTheme(theme: kDarkTheme), child: Icon( LineAwesomeIcons.moon, size: ScreenUtil().setSp(50), ), ), ); }, ); }

    ThemeData selectedColorTheme(BuildContext context) => ThemeData( accentColor: _shadeColor, appBarTheme: ThemeData.dark().appBarTheme.copyWith(color: _shadeColor), );

    void _openColorPicker() async { _openDialog( "Color picker", MaterialColorPicker( selectedColor: _shadeColor, onColorChange: (color) { _tempShadeColor = Color(color.value); }, onMainColorChange: (color) { _tempMainColor = color; }, ), ); }

    void openDialog(String title, Widget content) { showDialog( context: context, builder: () { return AlertDialog( contentPadding: const EdgeInsets.all(6.0), title: Text(title), content: content, actions: [ FlatButton( child: Text('CANCEL'), onPressed: Navigator.of(context).pop, ), GestureDetector( child: Text('SUBMIT'), onTap: () { Navigator.of(context).pop(); _mainColor = _tempMainColor; _shadeColor = _tempShadeColor; }, ), ], ); }, ); }

    Widget colorChange() { return ThemeSwitcher( builder: (context) { return Container( child: RaisedButton( child: Text(" change color "), onPressed: () { ThemeSwitcher.of(context).changeTheme( theme: selectedColorTheme(context), ); }, ), ); }, ); } }

    when i click the " change color " Button , this error " The getter 'dx' was called on null. Receiver: null Tried calling: dx " occur in debug consol Can you help me ?????

    opened by SediqeZangane 0
  • Color Expansion: No Shades available

    Color Expansion: No Shades available

    Hey, so I've noticed that selecting shades in not available when the colour selector is in an ExpansionTile. Not 100% certain if you may have noticed this when using the package, it may very well be my set up that has the issue. Thanks in advance for taking the time :smile:

    Here's how I've currently set it up in my project:

    _colorSelector(String title, Settings prefs, String attr) {
        return ExpansionTile(
          title: Text.rich(
            TextSpan(
              text: title,
            ),
          ),
          children: <Widget>[
            _generateColor(_getColor(attr), prefs),
          ],
          trailing: CircleColor(
            color: prefs.colors[_getColor(attr)],
            circleSize: 25 * (prefs.scale / 2),
          ),
        );
      }
    

    What generate color does :

    _generateColor(int colorSetting, Settings prefs) {
        return MaterialColorPicker(
          allowShades: true,
          circleSize: 75 * (prefs.scale),
          onColorChange: (Color color) {
            prefs.themeData = ThemeData(
                primaryColor: (colorSetting == 0) ? color : prefs.colors[0],
                primarySwatch: (colorSetting == 0)
                    ? MaterialColor(
                        color.value,
                        toSwatch(color.value),
                      )
                    : MaterialColor(
                        prefs.colors[0].value,
                        toSwatch(prefs.colors[0].value),
                      ),
                brightness: (prefs.darkMode) ? Brightness.dark : Brightness.light,
                accentColor: (colorSetting == 1) ? color : prefs.colors[1],
                accentColorBrightness: prefs.themeData.accentColorBrightness,
                splashColor: (colorSetting == 2) ? color : prefs.colors[2]);
          },
          // onMainColorChange: (ColorSwatch color) {
          //   prefs.themeData = ThemeData(
          //       primaryColor: (colorSetting == 0) ? color : prefs.colors[0],
          //       primarySwatch: (colorSetting == 0)
          //           ? MaterialColor(
          //               color.value,
          //               toSwatch(color.value),
          //             )
          //           : MaterialColor(
          //               prefs.colors[0].value, toSwatch(prefs.colors[0].value)),
          //       brightness: (prefs.darkMode) ? Brightness.dark : Brightness.light,
          //       accentColor: (colorSetting == 1) ? color : prefs.colors[1],
          //       accentColorBrightness: prefs.themeData.accentColorBrightness,
          //       splashColor: (colorSetting == 2) ? color : prefs.colors[2]);
          // },
          selectedColor: prefs.colors[colorSetting],
        );
      }
    
    opened by Nexushunter 0
Releases(1.1.0+2)
Owner
Jean-Charles Moussé
Mobile (Android, iOS, Flutter) and Web (React, JS, PHP) developer. Student at Efreitech
Jean-Charles Moussé
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
A Flutter package allows you to Showcase/Highlight your widgets step by step.👌🔝🎉

ShowCaseView A Flutter package allows you to Showcase/Highlight your widgets step by step. Preview Installing Add dependency to pubspec.yaml Get the l

Simform Solutions 1.1k Jan 2, 2023
flutter web app with given code and example. Step by step teaching how to build a flutter web app with backend

flutter_web A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

dbestech 20 Oct 26, 2022
Flutter Navigation - all types of navigation in flutter run main.tabBar.dart to see tabBar, and run main.dart to see the otheres

pop_up_bar A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Michael Odumosu 0 Jan 1, 2022
Color-Converter - A minimalist application made with flutter to convert hexadecimal colors to RGB colors and vise-versa.

Color Converter A minimalist application made with flutter to convert hexadecimal colors to RGB colors and vise-versa for Flutter Create Competition.

Poojan Pandya 2 Sep 16, 2020
Receiving ozh's github-colors repository with latest commit of colors.json to Flutter's Color object.

Apply GitHub's languages colours into Flutter's Color object. Receiving ozh's github-colors repository with latest commit of colors.json to Flutter's

Cyrus Chan 1 Jun 6, 2022
Color picker for Flutter, based on the Google Docs color picker.

Material ColorPicker Color picker for Flutter, based on the Google Docs color picker. Getting Started You can embed into your material app or use it o

Razvan Lung 103 Oct 30, 2022
A Flutter color palette with eyedropper, HSL, RGB and Material colors

Cyclop A flutter colorpicker with an eyedropper tool. Works on mobile, desktop & web ( CanvasKit) Demo Desktop & tablet Mobile Material HSL RVB Custom

Erick Ghaumez 106 Oct 17, 2022
A Flutter color palette with eyedropper, HSL, RGB and Material colors

Cyclop A flutter colorpicker with an eyedropper tool. Works on mobile, desktop & web ( CanvasKit) Demo Desktop & tablet Mobile Material HSL RVB Custom

Erick Ghaumez 107 Jan 5, 2023
Nepali date picker - Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support

Nepali Date Picker + Calendar Material and Cupertino Styled Date Picker, Date Range Picker and Calendar with Bikram Sambat(Nepali) Support. Nepali Dat

Sarbagya Dhaubanjar 35 Jan 3, 2023
A TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

easy_tab_controller A user-friendly TabBarController widget for flutter developer. Getting Started This project is a starting point for a Flutter plug

圆号本昊 3 May 26, 2022
Flutter modern bottom navbar. Compatible with Android & iOS. You can customize it freely.

ss_bottom_navbar Flutter modern bottom nav bar. Compatible with Android & iOS. You can customize it freely. Getting Started dependencies: ss_bottom_

null 6 Sep 18, 2022
null 0 Feb 2, 2022
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Bryan Cancel 30 Dec 4, 2021
Selectable Circle where colors can be customized and a child widget can be defined

selectable_circle A Flutter package for an Circle that can be Selected with animation. How to use SelectableCircle( width: 80.0, onSelected: (

null 11 Sep 29, 2021
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022
Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business logic layer.

Multi-page Form Flow Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business log

Sandip Pramanik 15 Dec 19, 2022
First Open Source Flutter based material design music player with audio plugin to play online music

Flutter Music App First Open Source Flutter based dribbblel Design Music Player. logo free design http://www.freeuid.com/category/free material icons

佩奇的弟弟乔治 380 Jan 4, 2023
First Open Source Flutter based Beautiful Material Design Text fields.

Pretty text field First Open Source Flutter based Beautiful Material Design Text fields.(More designed text fields coming soon.) Features [*] Compatib

Darshh 1 Aug 29, 2022