Posted on Jul 18, 2021

Flutter & Dart Tips - Week In Review #6

Hello Reader,

This is the 6th post of the Flutter & Dart Tips series. Below are the six tips I shared last week.

1- You can use InkWell to create a ripple effect to produce a visual experience for touch response.

 InkWell( splashColor: Colors.red, onTap: () {}, child: Card( elevation: 5.0, child: Text( ' Click This ', style: Theme.of(context).textTheme.headline2, ), ), ),

2- In the example below we are using BoxDecoration & DecorationImage to set a background image an App

 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter'), ), body: Container( width: double.infinity, height: double.infinity, decoration: BoxDecoration( image: DecorationImage( image: NetworkImage(image_Url), ), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Title', style: const TextStyle( color: Colors.white, fontSize: 48, fontWeight: FontWeight.bold), ) ], ), ), ); }

3- You can use the ListWheelScrollView widget to build ListView in a scrollable wheel with 3D-effect as if the children are rotating in a wheel.

 ... List<Widget> items = [ ListTile( leading: Icon(Icons.local_airport, size: 50), title: Text('Airport'), subtitle: Text('Description'), ), ListTile( leading: Icon(Icons.local_convenience_store, size: 50), title: Text('Convenience Store'), subtitle: Text('Description'), ), ListTile( leading: Icon(Icons.local_dining, size: 50), title: Text('Dining'), subtitle: Text('Description'), ), ListTile( leading: Icon(Icons.local_drink, size: 50), title: Text('Drink'), subtitle: Text('Description'), ), ListTile( leading: Icon(Icons.local_florist, size: 50), title: Text('Florist'), subtitle: Text('Description'), ), ListTile( leading: Icon(Icons.local_gas_station, size: 50), title: Text('Gas Station'), subtitle: Text('Description'), ), ListTile( leading: Icon(Icons.local_grocery_store, size: 50), title: Text('Grocery Store'), subtitle: Text('Description'), ), ]; ... Center( child: ListWheelScrollView( itemExtent: 75, children: items, ) )

4- You can have a background color behind a text and add a curve at the start and the end.

 Center( child: Text( 'This is a very important text ', style: TextStyle( fontWeight: FontWeight.w600, color: Colors.white, fontSize: 20, background: Paint() ..strokeWidth = 30.0 ..color = Colors.red ..style = PaintingStyle.stroke ..strokeJoin = StrokeJoin.round), ), )

5- Use the ready-made widget ‘AboutListTile’ to show an about box displaying extra information about the app like its Version, Privacy policy, Official website, etc.

 .... final List<Widget> aboutBoxChildren = <Widget>[ SizedBox( height: 20, ), Text('App information'), Text('App Privacy Policy'), Text('App Terms of Service'), RichText( text: TextSpan( children: <TextSpan>[ TextSpan( style: TextStyle(color: Theme.of(context).accentColor), text: 'Site URL'), ], ), ) ]; ....... drawer: Drawer( child: SingleChildScrollView( child: SafeArea( child: AboutListTile( icon: const Icon(Icons.info), applicationIcon: const FlutterLogo(), applicationName: 'Amazing About Example', applicationVersion: 'July 2021', applicationLegalese: '\u{a9} 2021 The Developer', aboutBoxChildren: aboutBoxChildren, ), ), ), ),

6- Use FittedBox to scale and fit the child widget inside. It restricts its child widgets from growing their size beyond a specific limit. It re-scales them according to the size available.

 Center( child: Row(children: [ Expanded( child: FittedBox( child: Text( "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", maxLines: 1, style: TextStyle(fontSize: 23), ), ), ), ]))