md-siam / widget_of_the_day

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

           

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
105. Listener > Read code
106. Builder > Read code
107. PageView.builder > Read code
108. AnimationBuilder > Read code
109. SnackBar > Read code

Screenshots:

Container	Expanded	Column	Row	ListView & Builder
SingleChildScrollView	Image.asset	GridViewBuilder	GestureDetector	BottomNavBar
AppBar	Drawer	SliverAppBar	TabBar	AnimatedContainer
MediaQuery	AlertDialog	Text & Styling	RichText	Timer
PageView	Stack	TextField	Animated Icon	Slider
DatePicker	TimePicker	ListWheelScroll	LinearGradient	ElevatedButton
FloatingActionButton	RawMaterialButton	IconButton	Navigator	Card
Clipper	RotatedBox	Transform	Positioned	CustomPaint
ClipOval	ClipRRect	ClipRect	ClipPath	Radial & Sweep
StatefulWidget	Table	DataTable	Placeholder	GestureD & InkW
Material	Switches	Dropdown&Popup	Hero Animation	AboutDialog
Stepper	FittedBox	showSearch	.adaptive	Scrollbar
ChoiceChip	Wrap	ExpansionTile	RangeSlider	showMode_Bott_Sh
AnimatedCrossFade	Flexible	Spacer	GridPaper	InteractiveViewer
CheckboxListTile	SelectableText	AnimatedPadding	RefreshIndicator	ImageFiltered
AspectRatio	ToggleButton	PhysicalModel	Align	SafeArea
PageRouteBuilder	Draggable	BackdropFilter	ReodleListView	FadeTransition
CircleAvatar	Tooltip	Visibility	IndexedStack	Navigator 2.0
Null Aware Opera.	Cascade Operator	Inherited Widget	Fract.Sizedbox	ConstrainedBox
CupertinoSearch	Stateful Builder	Layout Builder	Orientati Builder	Platform Detect
FutureBuilder	StreamBuilder	ChangeNotifier	ValueNotifier	InheritedNotifier
Listener	Builder	PageView.builder	AnimationBuilder	SnackBar

widget_of_the_day's Issues

Issue with BottomSheet background.

When I am pass the customPaint stack widget in bottomsheet then show me a white scaffold, When I am Wrap stack with Container/Sizebox then work perfectly, but In bottomsheet I found a layer ....Now I want the background transparent , How can I achive it?