Flutter & Dart Tips - Week In Review #3
Tags: beginners, flutter, codenewbie, dart
Published: 2021-06-27 01:59:06

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.

```dart

    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.

```dart

    // 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.

```dart

    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.

```dart

    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

```dart

    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. 

```dart

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

```



See you next week. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a>

<span>Cover image <a href="https://unsplash.com/@xavi_cabrera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Xavi Cabrera</a> on <a href="https://unsplash.com/s/photos/lego?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a> </span>