准备工作

本文介绍Flutter的各种类型的Widget，和其使用场景。

Widget 分类

• 基础组件 Widget（Basics）： Container、Row、Column、Image、Text、Icon、RaisedButton、Scaffold、Appbar、FlutterLogo、Placeholder

• Material Components：

• App 结构和导航类

Scaffold、Appbar、BottomNavigationBar、TabBar、TabBarView、MaterialApp、WidgetsApp、Drawer、SliverAppBar

• 按钮类 RaisedButton、FloatingActionButton、FlatButton、IconButton、DropdownButton、PopupMenuButton、ButtonBar

• 输入和选择类 TextField、Checkbox、Raido、Switch、Slider、Date&Time Pickers

• 对话框和控制面板类 SimpleDialog、AlertDialog、BottomSheet、ExpansionPanel、SnackBar）；

• 信息显示类（Image、Icon、Chip、Tooltip、DataTable、Card、LinearProgressIndicator、CircularProgressIndicator、GridView

• 布局类 ListTile、Stepper、Divider

• Cupertino （iOS-style widgets）： CupertinoActionSheet、CupertinoActivityIndicator、CupertinoAlertDialog、CupertinoButton、CupertinoDatePicker、CupertinoDialog、CupertinoDialogAction、CupertinoFullscreenDialogTransition、CupertinoPageScaffold、CupertinoPageTransition、CupertinoPicker、CupertinoPopupSurface、CupertinoSegmentedControl、CupertinoSlider、CupertinoSwitch、CupertinoNavigationBar、CupertinoTabBar、CupertinoTabScaffold、CupertinoTabView、CupertinoTextField、CupertinoTimerPicker

• Layout：

• 单个子元素的布局 Widget

Container、Padding、Center、Align、FittedBox、AspectRatio、ConstrainedBox、Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth、LimitedBox、Offstage、OverflowBox、SizedBox、SizedOverflowBox、Transform、CustomSingleChildLayout

• 多个子元素的布局 Widget Row、Column、Stack、IndexedStack、GridView、Flow、Table、Wrap、ListBody、CustomMultiChildLayout、LayoutBuilder、ListView、Expanded

• Text 文本显示类： Text、RichText、DefaultTextStyle

• Assets、图片、Icons 类： Image、Icon、RawImage、AssetBundle

• Input 输入类： Form、FormField、RawKeyboardListener

• 动画和 Motion 类： AnimatedContainer、AnimatedCrossFade、Hero、AnimatedBuilder、DecoratedBoxTransition、FadeTransition、PositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition、AnimatedDefaultTextStyle、AnimatedListState、AnimatedModalBarrier、AnimatedOpacity、AnimatedPhysicalModel、AnimatedPositioned、AnimatedSize、AnimatedWidget、AnimatedWidgetBaseState

• 交互模型类：

• 触摸交互

Draggable、LongPressDraggable、GestureDetector、DragTarget、Dismissible、IgnorePointer、AbsorbPointer、Scrollable

• 路由导航 Hero、Navigator

• 样式类： Padding、Theme、MediaQuery

• 绘制和效果类： Transform、Opacity、DecoratedBox、FractionalTranslation、RotatedBox、ClipOval、ClipPath、ClipRect、CustomPaint、BackdropFilter

• Async 异步模型类： FutureBuilder、StreamBuilder

• 滚动类： GridView、ListView、NestedScrollView、SingleChildScrollView、Scrollable、Scrollbar、CustomScrollView、NotificationListener、ScrollConfiguration、RefreshIndicator、PageView

• 辅助功能类： Semantics、MergeSemantics、ExcludeSemantics

VScode 调试工具

• 点击

• 命令模式

  • cmd + shift + p 启动命令
  • 输入 Dart: Open DevTools
  • 选择 in web browser
  • 会在浏览器中打开调试界面

• 面板选项

  • Flutter Inspector 布局组件
  • Performance 性能
  • CPU Profiler 耗能
  • Memory 内存
  • Debugger 调试信息
  • Network 抓包
  • Logging 日志
  • App Size 文件打包尺寸分析