每日 Widget

Flutter Widget 简介：这个仓库将教你一些 Flutter SDK 中常用的 Widget，并展示如何将它们用于你的 UI 设计。播放列表 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]

Widget 列表

  1. Container > 简介 > 新形态设计
  2. Expanded > 动态布局 > Column 和 Row 内部的布局改变
  3. Column > mainAxisAlignment 和 crossAxisAlignment Row > alignment
  4. ListView > Builder > Instagram UI 设计
  5. SingleChildScrollView > scrollDirection > padding > physics
  6. Image.Asset > fit (BoxFit.cover) > 将其放在 Container Widget 中以实现圆角
  7. Gridview > Builder > crossAxisCount (水平方向的框数量)
  8. GestureDetector > onTap:()=>{‘action’} > 将功能逻辑与 UI 分开
  9. BottomNavBar > StateStatefulWidget > type: BottomNavigationBarType.fixed > 页面列表
  10. AppBar > backgroundColor: Colors.transparent > leading (左侧定位) > actions (右侧定位)
  11. Drawer > 始终在 ListView 中 > DrawerHeader > ListTile > endDrawer (右侧抽屉)
  12. SliverAppBar > CustomScrollView > SliverAppBar > expandedHeight > SliverToBoxAdapter SliverAppBar 的属性：flexibleSpace > floating (默认为 'false') > pinned (默认为 'false')
  13. TabBar > 使用 'DefaultTabController' 包裹 Scaffold > length (项目数量) > TabBar TabBarView > Container > 使用 'Expanded' 包裹 TabBarView 以控制 Container 大小
  14. AnimatedContainer > GestureDetector > onTap (激活动画) > duration (动画执行时间，单位“秒”) > Container > Alignment
  15. MediaQuery > Height > Width > Aspect Ratio > Orientation
  16. AlertDialog > MaterialButton > onPressed:_showDialog > AlertDialog(title, content, actions) > CupertinoAlertDialog (用于 iOS 设备)
  17. Text > style > TextStyle > fontStyle: FontStyle.italic > fontWeight > theme (用于设置默认样式)
  18. RichText > TextSpan > 默认样式 > children > 多个 'TextSpan' Widget
  19. Timer > StatefulWidget > Text > MaterialButton > onPressed: _startCountDown > Timer.periodic
  20. PageView > controller > scrollDirection: Axis.vertical > 不同的 Post 页面
  21. Stack > alignment: Alignment.center (默认 Alignment.topLeft)
  22. TextField > StatefulWidget > _textController > TextField > controller: _textController > decoration > onPressed > suffixIcon > _textController.clear() > Expanded > userPost
  23. AnimatedIcon > StatefulWidget > with SingleTickerProviderStateMixin > late AnimationController _animationController > 阅读代码
  24. Slider > StatefulWidget > Slider(value: value, onChanged: onChanged) > Slider Widget 的许多颜色参数
  25. DatePicker > StatefulWidget > DateTime 变量 > _showDatePicker > 阅读代码
  26. TimePicker > StatefulWidget > TimeOfDay 变量 > _showTimePicker > 阅读代码
  27. ListWheelScrollView > StatefulWidget > itemExtent > perspective > diameterRatio > physics: const FixedExtentScrollPhysics() > onSelectedItemChanged > 阅读代码
  28. LinearGradient > Container > decoration > BoxDecoration > gradient > LinearGradient
  29. ElevatedButton > style > ElevatedButton.styleFrom > primary: Colors.blue OutlinedButton
  30. FloatingActionButton
  31. RawMaterialButton > 用于自定义炫酷按钮
  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 > 每个 quarterTurns 等于 90°
  37. Transform > origin > transform
  38. Positioned > Stack > alignment > Positioned > 一次最多使用 2 个属性
  39. CustomPaint > 观看视频
  40. ClipOval > Image.asset > height 和 width 应该相同 > 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 > 它可以操作其子 Widget 的一些属性
  51. Switches > ListTile > leading > Switch / Checkbox / Radio > value > onChanged > groupValue (仅用于 Radio)
  52. DropDown&Popup > 查看代码
  53. HeroAnimation > tag: 两个页面中的 item
  54. AboutDialog > ElevatedButton > onPressed > showAboutDialog
  55. Stepper > int _currentStep = 0 > Stepper > Step (带有 title: 和 content:) > onStepTapped > currentStep: _currentStep > onStepContinue > onStepCancel
  56. FittedBox > 将文本适配到容器中
  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 > 查看代码
  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 > 查看代码
  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 > 查看代码
  90. Null Aware Operators > 查看代码
  91. Cascade Operator > 查看代码
  92. Inherited Widget > 查看代码
  93. Fractionally Sizedbox
  94. Constrained Box > 查看代码
  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 > 查看代码

屏幕截图

Row

GitHub

查看 Github