Flutter & Dart Tips - Week In Review #3

Hello Reader,

Welcome to the 3rd post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.

1- You can size the widgets to fit within a row or column using the Expanded widget.

    Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
            Expanded(
            child: Image.asset('images/pic1.jpg'),
            ),
            Expanded(
            child: Image.asset('images/pic2.jpg'),
            ),
            Expanded(
            child: Image.asset('images/pic3.jpg'),
            ),
        ],
    );

2- Use the Hero widget to animate a widget from one screen to the next. e.g., an icon on the first page flying to the second page.

    // Page 1

    Hero(
        tag: "FlyingHero",
        child: Icon(
        Icons.party_mode_outlined,
        size: 50.0,
        ),
    ),

    ...

    // Page 2

    Hero(
        tag: "FlyingHero",
        child: Icon(
        Icons.party_mode_outlined,
        size: 150.0,
        ),
    ),

3- Use Stack to overlap widgets, The first widget will be the bottommost item, and the last widget will be the topmost item.

    Stack(
        children: [
        Container(
            width: 100,
            height: 100,
            color: Colors.red,
        ),
        Container(
            width: 90,
            height: 90,
            color: Colors.green,
        ),
        Container(
            width: 80,
            height: 80,
            color: Colors.blue,
        ),
        ],
    )

4- Use themes to define a set of colors, fonts, shapes, and design styles throughout your app. It's a way to centralize all your stylistic decisions in one place.

    MaterialApp(
        title: appName,
        theme: ThemeData(
        // The default brightness and colors.
        brightness: Brightness.light,
        primaryColor: Colors.lightGreen[500],
        accentColor: Colors.amber[600],
        // The default font family.
        fontFamily: 'Georgia',
        // TextTheme & text styling
        textTheme: TextTheme(
            headline1: TextStyle(fontSize: 64.0, fontWeight: FontWeight.bold),
            headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
            bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
        ),
        home: MyHomePage(
        title: appName,
        ),
    );

5- Use the constant (kReleaseMode) from (package:flutter/foundation.dart) to execute a code in debug or release mode

    import 'package:flutter/foundation.dart';
    if (kReleaseMode) {
        // Release Mode
        print('release mode');
    } else {
        print('debug mode');
    }

6- Use Cascade notation to make a sequence of operations on the same object.

    List<String> somelist = []
    ..addAll(['London', 'Dublin', 'Paris'])
    ..sort()
    ..forEach((element) => print('\n$element'));

See you next week. 👋🏻

Follow me on Twitter for more tips about #coding, #learning, #technology...etc.

Check my Apps on Google Play

Cover image Xavi Cabrera on Unsplash