Flutter & Dart Tips - Week In Review #6
Offline Programmer
Posted on July 18, 2021
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),
),
),
),
]))
See you next week. 👋🏻
Follow me on Twitter for more tips about #coding, #learning, #technology...etc.
Check my Apps on Google Play
Cover image Mounzer Awad on Unsplash
Posted on July 18, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
