Hello Reader,
This is it. This post is the last one of the weekly Flutter\Dart tips series. By the end of this post, The number of tips I shared with you will be more than 100 tips. Thanks for following me to this point.
1- LongPressDraggable Widget is used to create a widget that can be dragged starting from LongPress.
...
LongPressDraggable(
feedback: FlutterLogo(
textColor: Colors.orange,
size: 100,
style: FlutterLogoStyle.stacked,
),
child: FlutterLogo(
textColor: Colors.green,
size: 100,
style: FlutterLogoStyle.stacked,
),
onDragEnd: (details) {
setState(() {
final adjustment = MediaQuery.of(context).size.height -
constraints.maxHeight;
_offset = Offset(
details.offset.dx, details.offset.dy - adjustment);
});
},
),
...
Try it on DartPad here
2- Baseline is a widget that positions its child according to the child's baseline.
...
Center(
child: Container(
color: Colors.blue,
height: 120.0,
width: 120.0,
child: Baseline(
child: Container(
color: Colors.red,
height: 60.0,
width: 60.0,
),
baseline: 20.0,
baselineType: TextBaseline.alphabetic,
),
),
)
...
Try it on DartPad here
3- Banner widget displays a diagonal message above the corner of another widget.
...
Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.yellow,
height: 100,
child: ClipRect(
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
color: Colors.yellow,
height: 100,
child: Center(
child: Text("Hello, banner!"),
),
),
),
),
),
)
...
Try it on DartPad here
4- BottomNavigationBar is a widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and five.
...
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
...
Try it on DartPad here
5- IntrinsicWidth is a widget that sizes its child to the child's maximum intrinsic width.
...
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: 200,
height: 100,
color: Colors.teal,
),
Expanded(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
],
),
)
...
Try it on DartPad here
6- IntrinsicHeight Widget is a widget that sizes its child to the child’s intrinsic height.
...
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: 150,
height: 100,
color: Colors.teal,
),
Container(
width: 150,
height: 200,
color: Colors.red,
)
],
),
)
...
Try it on DartPad here
Thank you. 👋🏻
Follow me on Twitter for more tips about #coding, #learning, #technology...etc.
Check my Apps on Google Play & Apple Store
Cover image Ray Hennessy on Unsplash
Top comments (0)