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:

Row

GitHub

View Github