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
Oldest comments (0)