Flutter & Dart Tips - Week In Review #16
Offline Programmer
Posted on September 25, 2021
Hello Reader,
I am getting very close to the goal of this series of sharing 100+ Flutter\Dart tips. Let's get into the 16th post of this.
1- Transform is a widget that applies a transformation before painting its child.
...
Container(
color: Colors.black,
child: Transform(
alignment: Alignment.topRight,
transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
child: Container(
padding: const EdgeInsets.all(8.0),
color: const Color(0xFFE8581C),
child: const Text('Apartment for rent!'),
),
),
)
...
Try it on DartPad here
2- VerticalDivider widget is a one device pixel thick vertical line, with padding on either side.
...
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text('Item1')
),
VerticalDivider(),
Container(
child: Text('Item2'),
),
VerticalDivider(),
Container(
child: Text('Item3'),
),
],
)
...
Try it on DartPad here
3- TimePicker widget shows a dialog containing a material design time picker.
...
Future<TimeOfDay> selectedTime = showTimePicker(
initialTime: TimeOfDay.now(),
context: context,
);
...
Try it on DartPad here
4- Stepper widget displays progress through a sequence of steps.
...
Stepper(
steps: [
Step(
title: new Text('Login Info'),
content: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Email Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
),
],
),
isActive: true,
state: StepState.editing
),
],
)
...
Try it on DartPad here
5- ActionChip widget used to create compact elements called chips, which trigger an action when the user presses on it.
...
ActionChip(
label: Text('Delete'),
onPressed: () {
print('Processing to delete item');
}
)
...
Try it on DartPad here
6- ExpansionPanel widget is a panel with a header and a body and can be either expanded or collapsed. The body of the panel is only visible when it is expanded.
...
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return ListTile(
title: Text(
'Click To Expand',
style: TextStyle(color: Colors.black),
),
);
},
body: ListTile(
title: Text('Description text',
style: TextStyle(color: Colors.black)),
),
isExpanded: _expanded,
canTapOnHeader: true,
),
...
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
Posted on September 25, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
