Hello Reader,
Welcome to the 12th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.
1- Use the Spacer Widget to create spacing between widgets.
... Container( color: Colors.red, height: 50, width: 50, ), Spacer(), Container( color: Colors.green, height: 50, width: 50, ), Spacer(), ... Try it on DartPad here
2- FractionallySizedBox Widget is a widget that sizes its child to a fraction of the total available space.
... FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.25, child: RaisedButton( child: Text('Click Me'), color: Colors.red, textColor: Colors.white, onPressed: () {}, ), ), ... Try it on DartPad here
3- Use the AnimatedSwitcher widget to create animation when switching between two widgets.
... AnimatedSwitcher( duration: const Duration(milliseconds: 500), transitionBuilder: (Widget child, Animation<double> animation) { return ScaleTransition(child: child, scale: animation); }, child: Text( '$_count', key: ValueKey<int>(_count), style: Theme.of(context).textTheme.headline4, ), ), ... Try it on DartPad here
4- Use the CupertinoAlertDialog to create an iOS-style widget that informs the user about situations that require acknowledgement.
... CupertinoAlertDialog( title: Text("This is the title"), content: Text("This is the content"), actions: [ // Close the dialog // You can use the CupertinoDialogAction widget instead CupertinoButton( child: Text('Cancel'), onPressed: () { Navigator.of(ctx).pop(); }), CupertinoButton( child: Text('I agree'), onPressed: () { // Do something print('I agreed'); // Then close the dialog Navigator.of(ctx).pop(); }, ) ], ) ... Try it on DartPad here
5- Use CupertinoButton Widget to create an iOS-style button that Takes in a text or an icon that fades out and in on touch.
... Container( child: Center( child: CupertinoButton( onPressed: () { // Todo }, child: Text("CupertinoButton Widget"), ), ), ), Container( child: Center( child: CupertinoButton.filled( onPressed: () {}, child: Text("CupertinoButton Widget"), ), ), ), ... Try it on DartPad here
6- The CupertinoActionSheet is an ios-themed widget that has action sheets design specifications.
... CupertinoActionSheet( title: Text( "Flutter dev", style: TextStyle(fontSize: 30), ), message: Text( "Select any action ", style: TextStyle(fontSize: 15.0), ), actions: <Widget>[ CupertinoActionSheetAction( child: Text("Action 1"), isDefaultAction: true, onPressed: () { print("Action 1 is been clicked"); }, ), CupertinoActionSheetAction( child: Text("Action 2"), isDestructiveAction: true, onPressed: () { print("Action 2 is been clicked"); }, ) ], cancelButton: CupertinoActionSheetAction( child: Text("Cancel"), onPressed: () { Navigator.pop(context); }, ), ); ... Try it on DartPad here
See you next week. 👋🏻
Follow me on Twitter for more tips about #coding, #learning, #technology...etc.
Check my Apps on Google Play & Apple Store
Cover image corey oconnell on Unsplash
Top comments (1)
Nice tips! I did not know about the Spacer widget. So many widgets I can't keep up lol!