Widget of The Day

Introduction to flutter widgets: This repo will teach you some of the common widgets that are available in flutter SDK, & shows you how to use them for your UI design. Playlist URL:

1. YouTube
2. YouTube [LinearGradient]
3. YouTube [Card]
4. YouTube [Clipper]
5. YouTube [CustomPaint]
6. YouTube [DataTable]
7. YouTube [Hero_Animation]
8. YouTube [Stepper_To_SelectableText]
9. YouTube [ClipPath (Bezier Curves)]
10. YouTube [InheritedWidget]

Widgets List:

1. Container > Simple intro > Neumorphic design
2. Expanded > flux > layout change inside Column & Row
3. Column > mainAxisAlignment & crossAxisAlignment Row > alignment
4. ListView > Builder > Instagram UI design
5. SingleChildScrollView > scrollDirection > padding > physics
6. Image.Asset > fit (BoxFit.cover) > place it inside a Container widget for rounded corners
7. Gridview > Builder > crossAxisCount (no. of box in the horizontal)
8. GestureDetector > onTap:()=>{‘action’} > Keep functional logic separated from UI
9. BottomNavBar > StateStatefulWidget > type: BottomNavigationBarType.fixed > List of pages
10. AppBar > backgroundColor: Colors.transparent > leading (left positioned)> actions (right positioned)
11. Drawer > Always in ListView > DrawerHeader > ListTile > endDrawer (drawer on right side)
12. SliverAppBar > CustomScrollView > SliverAppBar > expandedHeight > SliverToBoxAdapter Property of SliverAppBar: flexibleSpace > floating (default ‘false’) > pinned (default ‘false’)
13. TabBar > wrap Scaffold with ‘DefaultTabController’ > length (no. of items) > TabBar TabBarView > Container > wrap TabBarView with ‘Expanded’ for Container size
14. AnimatedContainer > GestureDetector > onTap (activate animation) > duration (time to execute animation in ‘second’) > Container > Alignment
15. MediaQuery > Height > Width > Aspect Ratio > Orientation
16. AlertDialog > MaterialButton > onPressed:_showDialog > AlertDialog(title, content, actions) > CupertinoAlertDialog (for iOS device)
17. Text > style > TextStyle > fontStyle: FontStyle.italic > fontWeight > theme (for setting a default style)
18. RichText > TextSpan > default style > children > multiple ‘TextSpan’ widgets
19. Timer > StatefulWidget > Text > MaterialButton > onPressed: _startCountDown > Timer.periodic
20. PageView > controller > scrollDirection: Axis.vertical > different Post pages
21. Stack > alignment: Alignment.center (default Alignment.topLeft)
22. TextField > StatefulWidget > _textController > TextField > controller: _textController > decoration > onPressed > suffixIcon > _textController.clear() > Expanded > userPost
23. AnimatedIcon > StatefulWidget > with SingleTickerProviderStateMixin > late AnimationController _animationController > Read the code
24. Slider > StatefulWidget > Slider(value: value, onChanged: onChanged) > Many color parameters of the Slider widget
25. DatePicker > StatefulWidget > DateTime variable > _showDatePicker > Read the code
26. TimePicker > StatefulWidget > TimeOfDay variable > _showTimePicker > Read the code
27. ListWheelScrollView > StatefulWidget > itemExtent > perspective > diameterRatio > physics: const FixedExtentScrollPhysics() > onSelectedItemChanged > Read the code
28. LinearGradient > Container > decoration > BoxDecoration > gradient > LinearGradient
29. ElevatedButton > style > ElevatedButton.styleFrom > primary: Colors.blue OutlinedButton
30. FloatingActionButton
31. RawMaterialButton > Use for custom fancy button
32. IconButton
33. Navigator > initialRoute > ElevatedButton > Navigator.pushNamed(context, ‘/first’) > Navigator.pop(context)
34. Card > shape: RoundedRectangleBorder > borderRadius: BorderRadius.circular(20) > Column > children[] > shadowColor > elevation
35. Clipper > Custom Clipper > Quadratic Bezier Curve
36. RotatedBox > quarterTurns: 3 > Each quarterTurns is ≡ 90°
37. Transform > origin > transform
38. Positioned > Stack > alignment > Positioned > 2 properties at a time
39. CustomPaint > Watch the video
40. ClipOval > Image.asset > height & width should be same > fit: BoxFit.cover
41. ClipRRect > borderRadius > Image.asset
42. ClipRect > Image.asset
43. ClipPath > ClipPath > clipper: CustomClipPath() > Path getClip(Size size){} > shouldReclip(CustomClipper< Path> oldClipper)
44. Radial & Sweep Gradient > Container > decoration > gradient> RadialGradient / SweepGradient
45. StatefulWidget > createState() > initState() > didChangeDependencies() > didUpdateWidget() > deactivate() > dispose() > setState((){‘actions’})
46. Table > border > columnWidths > textDirection > children > TableRow > children
47. DataTable > border > columnSpacing > onSelectAll > sortColumnIndex > sortAscending > columns > rows
48. Placeholder > fallbackHeight > strokeWidth > color > strokeWidth
49. GestureDetector & InkWell > GestureDetector > onTap | InkWell > OnTap
50. Material > It can manipulate some properties of it’s child widget
51. Switches > ListTile > leading > Switch / Checkbox / Radio > value > onChanged > groupValue (only for Radio)
52. DropDown&Popup > See the code
53. HeroAnimation > tag: item in both pages
54. AboutDialog > ElevatedButton > onPressed > showAboutDialog
55. Stepper > int _currentStep = 0 > Stepper > Step (with title: & content:) > onStepTapped > currentStep: _currentStep > onStepContinue > onStepCancel
56. FittedBox > Fit text inside a container
57. show Search > AppBar > actions > IconButton > onPressed: () {showSearch()}
58. .adaptive > Slider.adaptive > SwitchListTile.adaptive > Switch.adaptive > Icon(Icons.adaptive.share) > CircularProgressIndicator.adaptive()
59. Scrollbar > isAlwaysShown: true > thickness: 10 > ListView.builder / GridView.builder
60. ChoiceChip > ChoiceChip > avatar > label > selected > onSelected
61. Wrap > Wrap > children:
62. ExpansionTile > title > children: > ListTile
63. RangeSlider > values > divisions > labels > onChanged:
64. showModelBottomSheet > showModalBottomSheet > context: context, > builder: (BuildContext context) > return > SizedBox
65. AnimatedCrossFade > firstChild > secondChild > crossFadeState > duration
66. Flexible > flex > fit
67. Spacer > flex: 1
68. GridPaper > color: Colors.deepPurple
69. InteractiveViewer > maxScale > child: Image.asset()
70. CheckboxListTile > title > subtitle > value
71. SelectableText > SelectableText > see code
72. AnimatedPadding > padding: EdgeInsets.all(padValue) > duration
73. RefreshIndicator > color > backgroundColor > onRefresh
74. ImageFiltered > import ‘dart:ui’; > ImageFiltered > imageFilter: ImageFilter.blur(sigmaX: 8),
75. AspectRatio > aspectRatio: 3 / 2 > child
76. ToggleButton > children:[] > isSelected > onPressed
77. Physical Model > color > elevation
78. Align > Container > child: > Align > alignment: Alignment(0.60, -0.80)
79. SafeArea > Scaffold > body: > SafeArea
80. PagerouteBuilder > check code
81. Draggable > DragTarget > onAccept > builder
82. BackdropFilter > Stack > Image.asset > Positioned > BackdropFilter > ImageFilter.blur()
83. ReorderableListView > itemCount > onReorder > itemBuilder
84. FadeTransition > FadeTransition > opacity: _animation!
85. CircleAvatar > radius: > backgroundImage: AssetImage()
86. Tooltip > message: > verticalOffset: > height: > Child:
87. Visibility > visible: isVisible > child: Image.asset(”)
88. IndexedStack > index: index > children:
89. Navigator 2.0 > See code
90. Null Aware Operators > See code
91. Cascade Operator > See code
92. Inherited Widget > See code
93. Fractionally Sizedbox
94. Constrained Box > See code
95. Cupertino Search > late TextEditingController textController > CupertinoSearchTextField > placeholder > controller
96. Stateful Builder > builder: (context, internalState) > internalState(() { counter++;})
97. Layout Builder > builder: (BuildContext context, BoxConstraints constraints){ return }
98. Orientation Builder > builder: (context, orientation){}
99. Platform Detect > import ‘dart:io’ show Platform;
100. FutureBuilder > FutureBuilder > future: getData() > builder
101. StreamBuilder > StreamBuilder > stream > initialData > builder
102. ChangeNotifier > CNController extends ChangeNotifier > notifyListeners()
103. ValueNotifier > final ValueNotifier< int> count = ValueNotifier< int>(0) > ValueListenableBuilder()
104. InheritedNotifier > Read code

Screenshots:

GitHub

View Github