29
loading...
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
29