Flutter组件详解与实战

 

 

 

 

目录

基础篇

 

第1章基础布局

 

1.1什么是组件

 

1.1.1FlutterLogo

 

1.1.2Placeholder

 

1.1.3Container

 

1.2如何拆分布局

 

1.2.1Column

 

1.2.2Row

 

1.2.3Wrap

 

1.2.4Stack

 

1.2.5Positioned

 

1.3组件尺寸和位置

 

1.3.1SizedBox

 

1.3.2Align

 

1.3.3Center

 

第2章文字与图片

 

2.1文字

 

2.1.1Text

 

2.1.2DefaultTextStyle

 

2.1.3RichText

 

2.2图标与图片

 

2.2.1Icon

 

2.2.2IconTheme

 

2.2.3Image

 

2.2.4FadeInImage

 

第3章用户输入

 

3.1文本框

 

3.1.1TextField

 

3.1.2CupertinoTextField

 

3.2按钮

 

3.2.1ElevatedButton

 

3.2.2TextButton

 

3.2.3CupertinoButton

 

 

 

 

 

 

第4章异步操作(45min)

 

4.1进度条

 

4.1.1CircularProgressIndicator

 

4.1.2LinearProgressIndicator

 

4.1.3CupertinoActivityIndicator

 

4.2异步显示

 

4.2.1FutureBuilder

 

4.2.2StreamBuilder

 

第5章分页呈现(34min)

 

5.1列表和网格

 

5.1.1ListView

 

5.1.2ListWheelScrollView

 

5.1.3ReorderableListView

 

5.1.4GridView

 

5.1.5PageView

 

5.2滚动监听和控制

 

5.2.1Scrollbar

 

5.2.2RefreshIndicator

 

5.2.3Dismissible

 

5.2.4ScrollConfiguration

 

5.2.5NotificationListener

 

5.2.6SingleChildScrollView

进阶篇

 

第6章进阶布局(19min)

 

6.1边界

 

6.1.1Padding

 

6.1.2SafeArea

 

6.1.3FittedBox

 

6.1.4MediaQuery

 

6.2弹性布局

 

6.2.1Flex

 

6.2.2Expanded

 

6.2.3Flexible

 

6.2.4Spacer

 

6.3约束

 

6.3.1ConstrainedBox

 

6.3.2LimitedBox

 

6.3.3LayoutBuilder

 

6.3.4FractionallySizedBox

 

第7章过渡动画(19min)

 

7.1渐变效果

 

7.1.1AnimatedContainer

 

7.1.2AnimatedPadding

 

7.1.3AnimatedPositioned

 

7.1.4AnimatedOpacity

 

7.1.5AnimatedDefaultTextStyle

 

7.2组件切换

 

7.2.1AnimatedSwitcher

 

7.2.2AnimatedCrossFade

 

第8章人机交互

 

8.1触摸检测

 

8.1.1GestureDetector

 

8.1.2Listener

 

8.1.3MouseRegion

 

8.1.4IgnorePointer

 

8.1.5AbsorbPointer

 

8.2拖放

 

8.2.1Draggable

 

8.2.2DragTarget

 

8.2.3LongPressDraggable

 

第9章悬浮与弹窗(13min)

 

9.1悬浮

 

9.1.1OverlayEntry

 

9.1.2CompositedTransformTarget

 

9.1.3CompositedTransformFollower

 

9.2弹窗

 

9.2.1AlertDialog

 

9.2.2CupertinoAlertDialog

 

9.2.3SimpleDialog

 

9.2.4CupertinoPopupSurface

 

9.2.5ModalBarrier

 

9.3底部弹窗

 

9.3.1BottomSheet

 

9.3.2DraggableScrollableSheet

 

9.3.3CupertinoActionSheet

 

第10章界面导航

 

10.1导航

 

10.1.1Navigator

 

10.1.2WillPopScope

 

10.1.3Hero

 

10.2程序结构

 

10.2.1WidgetsApp

 

10.2.2MaterialApp

 

10.2.3CupertinoApp

 

扩展篇

 

第11章风格组件

 

11.1Material风格

 

11.1.1AppBar

 

11.1.2BackButton

 

11.1.3BottomNavigationBar

 

11.1.4ButtonBar

 

11.1.5Card

 

11.1.6Checkbox

 

11.1.7Chip

 

11.1.8CircleAvatar

 

11.1.9DataTable

 

11.1.10DatePickerDialog

 

11.1.11Divider

 

11.1.12Drawer

 

11.1.13DropdownButton

 

11.1.14ExpandIcon

 

11.1.15ExpansionTile

 

11.1.16FloatingActionButton

 

11.1.17IconButton

 

11.1.18Ink

 

11.1.19InkResponse

 

11.1.20ListTile

 

11.1.21Material

 

11.1.22OutlinedButton

 

11.1.23PopupMenuButton

 

11.1.24Radio

 

11.1.25Scaffold

 

11.1.26Slider

 

11.1.27SnackBar

 

11.1.28Stepper

 

11.1.29Switch

 

11.1.30TabBar

 

11.1.31TimePickerDialog

 

11.1.32ToggleButtons

 

11.1.33Tooltip

 

11.2Cupertino风格

 

11.2.1CupertinoContextMenu

 

11.2.2CupertinoDatePicker

 

11.2.3CupertinoNavigationBar

 

11.2.4CupertinoPageScaffold

 

11.2.5CupertinoPicker

 

11.2.6CupertinoSegmentedControl

 

11.2.7CupertinoSlider

 

11.2.8CupertinoSlidingSegmentedControl

 

11.2.9CupertinoSwitch

 

11.2.10CupertinoTabBar

 

11.2.11CupertinoTabScaffold

 

11.2.12CupertinoTabView

 

11.2.13CupertinoTimePicker

 

第12章进阶动画(67min)

 

12.1如何选择动画组件

 

12.2显式动画

 

12.2.1RotationTransition

 

12.2.2FadeTransition

 

12.2.3ScaleTransition

 

12.2.4SizeTransition

 

12.2.5SlideTransition

 

12.2.6PositionedTransition

 

12.2.7DecoratedBoxTransition

 

12.2.8AnimatedIcon

 

12.3自定义动画

 

12.3.1TweenAnimationBuilder

 

12.3.2AnimatedBuilder

 

12.3.3AnimatedWidget

 

第13章滚动布局

 

13.1Sliver

 

13.1.1CustomScrollView

 

13.1.2SliverToBoxAdapter

 

13.1.3SliverList

 

13.1.4SliverFixedExtentList

 

13.1.5SliverPrototypeExtentList

 

13.1.6SliverGrid

 

13.1.7SliverFillViewport

 

13.2Sliver导航条

 

13.2.1SliverAppBar

 

13.2.2FlexibleSpaceBar

 

13.2.3SliverPersistentHeader

 

13.3更多的Sliver组件

 

13.3.1SliverFillRemaining

 

13.3.2SliverSafeArea

 

13.3.3SliverPadding

 

13.3.4SliverLayoutBuilder

 

13.3.5SliverOpacity

 

13.3.6SliverVisibility

 

13.3.7SliverAnimatedList

 

第14章渲染与特效

 

14.1组件修饰

 

14.1.1Opacity

 

14.1.2DecoratedBox

 

14.1.3PhysicalModel

 

14.1.4RotatedBox

 

14.1.5Transform

 

14.1.6FractionalTranslation

 

14.1.7ImageFiltered

 

14.1.8BackdropFilter

 

14.1.9ShaderMask

 

14.2裁剪边框

 

14.2.1ClipOval

 

14.2.2ClipRect

 

14.2.3ClipRRect

 

14.2.4ClipPath

 

第15章深入布局(15min)

 

15.1测量尺寸

 

15.1.1IntrinsicWidth

 

15.1.2IntrinsicHeight

 

15.1.3AspectRatio

 

15.1.4PreferredSize

 

15.2性能与状态

 

15.2.1Offstage

 

15.2.2Visibility

 

15.2.3IndexedStack

 

15.2.4RepaintBoundary

 

15.3打破约束

 

15.3.1UnconstrainedBox

 

15.3.2OverflowBox

 

15.3.3SizedOverflowBox

 

15.4深度定制

 

15.4.1CustomSingleChildLayout

 

15.4.2CustomMultiChildLayout

 

15.4.3Flow

 

15.4.4CustomPaint

 

附录A