Flutter Tips 29-35

May 10, 2020 • ☕️ 5 min read

When you are making responsive UIs, you need to wrap contents dynamically.

Wrap comes to the rescue. Wrap is like Column/Row but wraps it’s children to next row or column.

Use Wrap like you use Column or Row just give it’s direction (either vertical or horizontal)

Wrap(
    direction: Axis.vertical/Axis.horizontal,
    children: [Widgets],
    runAlignment: WrapAlignment.start,
    spacing: 20, //space between previous and next item
    runSpacing: 20, //space between new row or column
    );

try in codepen wrap

To blur a widget, put it below a BackdropFilter widget in stack.

Adjust Gussian blur level with sigmaX, and sigmaY.

Must provide child to Backdrop it needs a layer to act as blur.

Stack(
    fit: StackFit.loose,
    children: <Widget>[
    FlutterLogo(size: 300),
    Positioned.fill(
        child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: Container(
            color: Colors.transparent,
        ),),
    ],
)

You will a blur like this. play in codepen blur

#Day31 Changing Theme Dynamically

Theme of the application is nothing but argument in MaterialApp or CupertinoApp.

Just create a StreamController of bool to represent it’s theme.

With the use of StreamBuilder, set the theme of inside Material/Cupertino App and boom 🚀 your app will be able to change it’s theme dynamically.

//Define a Inherited Widget
class SettingsStore extends InheritedWidget {
    final ValueNotifier<ThemeData> theme = ValueNotifier(ThemeData.light());

    SettingsStore({@required Widget child}) : super(child: child);

    static SettingsStore of(BuildContext context) =>
    context.dependOnInheritedWidgetOfExactType<SettingsStore>();

    void updateTheme(ThemeData theme) => this.theme.value = theme;

    @override
    bool updateShouldNotify(SettingsStore oldWidget) => oldWidget.theme != this.theme;
}


//Listen to it
class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return ValueListenableBuilder(
            valueListenable: SettingsStore.of(context).theme,
            builder: (context, theme, child) => MaterialApp(
            theme: theme,
            home: SettingsView(),),
        );
    }
}



//Change the theme from any build method.
SettingsStore.of(context).updateTheme(ThemeData.light())

Credit: u/Kounex’s

try on dartpad

dynamicTheme

#Day32 Dart Extension

We can extend functionality to existing class/API/Library without inheriting it to a child class.

Extensions can have method, getter and setter.

Here we add function to DateTime class without subclassing it.

Define extension like this :

extension DateExtensions on DateTime{
    
    printYYYYMMdd(String seperator) {
        var dateString = "${this.year}$seperator${getTwoDigit(this.month)}$seperator${getTwoDigit(this.day)}";
        print(dateString);
    }
    
    String getTwoDigit(int number){
        return (number < 10)? "0$number" :number.toString();
    }
    
    DateTime get  nextYear => this.add(Duration(days:365));
    
    DateTime previousYear() => this.subtract(Duration(days:365));
}

Then Just Call those extensions

void main() {
    var now = DateTime.now();
    var nextYear = now.nextYear;
    var lastYear = now.previousYear();

    now.printYYYYMMdd("-");
    nextYear.printYYYYMMdd("/");
    previousYear.printYYYYMMdd(".");
}

try on dartpad

#Day33 ToastBadge (toast_badge) package

If you want to show notification that auto dismisses anywhere in the screen, use toast_badge.

Just wrap any widget with ToastBadget or call .enableBadge() on any widget, you will be able to show notification on that widget without the need of BuildContext object.

i.e. You use it like toast but in the place you desire.

Wrap

child: ToastBadge( child: SettingPage(),),


//OR 

child: SettingPage().enableBadge(),

Call

ToastBadge.show("Hello Toast");


//With more options

ToastBadge.show("Hello Toast",  
mode: ToastMode.INFO, 
duration: Duration(milliseconds: 500));

use this package

toast

#Day34 Making Reorderable list

Create ReorderableListView just like normal ListView.

Give Key to each child

Handle onReorder: (oldIndex, newIndex)

ReorderableListView(
      onReorder: (oldIndex, newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          var previous = names.removeAt(oldIndex);
          names.insert(newIndex, previous);
        });
      },
      children:[
        child(key:ObjectKey(item)),.....
      ]
)

try in codepen

reorderable

#Day35 Dart Dev tools

Dart dev tool is powerful set of debugging and performance tools like Layout Inspector,Timeline, Memory, App Performance,Debugger,Logging & Network monitor.

Android Stidio : You can open it by clicking dart icon on Run tab when app is runnin in Anadroid Studio

VSCode: typing Open Dev Tools in command Pallet.

Learining to use Dart Dev tool is very 🚨important skill🚨 to have as a Flutter/dart developer.

Opening in Android Studio Opening in Android Stuido