Flutter組件詳解與實戰(zhàn)

 

 

 

 

目錄

基礎篇

 

第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章分頁呈現(xiàn)(34min)

 

5.1列表和網(wǎng)格

 

5.1.1ListView

 

5.1.2ListWheelScrollView

 

5.1.3ReorderableListView

 

5.1.4GridView

 

5.1.5PageView

 

5.2滾動監(jiān)聽和控制

 

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性能與狀態(tài)

 

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