DEV Community

Cover image for Flutter & Dart Tips - Week In Review #3
Offline Programmer
Offline Programmer

Posted on

Flutter & Dart Tips - Week In Review #3

#beginners #flutter #codenewbie #dart

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'), ), ], );
Enter fullscreen mode Exit fullscreen mode

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, ), ),
Enter fullscreen mode Exit fullscreen mode

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, ), ], )
Enter fullscreen mode Exit fullscreen mode

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, ), );
Enter fullscreen mode Exit fullscreen mode

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'); }
Enter fullscreen mode Exit fullscreen 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'));
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)