# flutterdo
**Repository Path**: zxh91989/flutterdo
## Basic Information
- **Project Name**: flutterdo
- **Description**: 旨在帮助初学者快速入门、收集学习资源
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-22
- **Last Updated**: 2021-02-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 动起来,动手实践远比畏畏缩缩、止步不前要好得多。
## 组件介绍(总计179个)
Github开源地址:[https://github.com/781238222/flutter-do/tree/master/source/flutter/widgets](https://github.com/781238222/flutter-do/tree/master/source/flutter/widgets)
如果觉得使用源文件不方便查看,可以到[老孟程序员](http://laomengit.com/)博客进行查看,除了查看更加方便外,还有如下好处:
- 对所有组件按字母进行了排序,方便查找。
- 列出了常用组件和非常用组件,初学者只需要重点学习常用组件即可。
- 这里有对初学者的一点点个人建议,少走弯路。
- 所有控件类的继承关系图,目前统计的控件总共353个。
- 定期更新新的组件的用法,也可以加入微信交流群(博客有加群方式),会同步更新。
### 常用组件(62)
1| 2 |3 | 4| 5|
-|-|-|-|-
[AboutDialog](http:laomengit.com/flutter/widgets/AboutDialog.html) | [AlertDialog](http:laomengit.com/flutter/widgets/Dialog.html#AlertDialog) | [Align](http:laomengit.com/flutter/widgets/Align.html) | [AnimatedList](http:laomengit.com/flutter/widgets/AnimatedList.html) | [AnimatedSwitcher](http:laomengit.com/flutter/widgets/AnimatedSwitcher.html) |
[AppBar](http:laomengit.com/flutter/widgets/AppBar.html) | [AspectRatio](http:laomengit.com/flutter/widgets/ConstrainedBox.html#AspectRatio) | [BottomNavigationBar](http:laomengit.com/flutter/widgets/BottomNavigationBar.html) | [BottomNavigationBarItem](http:laomengit.com/flutter/widgets/BottomNavigationBar.html#BottomNavigationBarItem) | [Card](http:laomengit.com/flutter/widgets/Card.html) |
[Center](http:laomengit.com/flutter/widgets/Align.html#Center) | [Checkbox](http:laomengit.com/flutter/widgets/Checkbox.html) | [CircularProgressIndicator](http:laomengit.com/flutter/widgets/ProgressIndicator.html#CircularProgressIndicator) | [Column](http:laomengit.com/flutter/widgets/Column.html) | [Container](http:laomengit.com/flutter/widgets/Container.html) |
[CupertinoActivityIndicator](http:laomengit.com/flutter/widgets/ProgressIndicator.html#CupertinoActivityIndicator) | [CupertinoAlertDialog](http:laomengit.com/flutter/widgets/Dialog.html#CupertinoAlertDialog) | [DataTable](http:laomengit.com/flutter/widgets/DataTable.html) | [Dialog](http:laomengit.com/flutter/widgets/Dialog.html) | [Divider](http:laomengit.com/flutter/widgets/Divider.html) |
[Drawer](http:laomengit.com/flutter/widgets/Drawer.html) | [DropdownButton](http:laomengit.com/flutter/widgets/Button.html#DropdownButton) | [Expanded](http:laomengit.com/flutter/widgets/Flexible.html#Expanded) | [FlatButton](http:laomengit.com/flutter/widgets/Button.html#FlatButton) | [Flexible](http:laomengit.com/flutter/widgets/Flexible.html) |
[FractionallySizedBox](http:laomengit.com/flutter/widgets/ConstrainedBox.html#FractionallySizedBox) | [GridView](http:laomengit.com/flutter/widgets/GridView.html) | [Hero](http:laomengit.com/flutter/widgets/Hero.html) | [Icon](http:laomengit.com/flutter/widgets/Icon.html) | [Image](http:laomengit.com/flutter/widgets/Image.html) |
[IndexedStack](http:laomengit.com/flutter/widgets/Stack.html#IndexedStack) | [Ink](http:laomengit.com/flutter/widgets/InkWell.html#Ink) | [InkWell](http:laomengit.com/flutter/widgets/InkWell.html) | [LinearProgressIndicator](http:laomengit.com/flutter/widgets/ProgressIndicator.html#LinearProgressIndicator) | [ListView](http:laomengit.com/flutter/widgets/ListView.html) |
[MaterialApp](http:laomengit.com/flutter/widgets/MaterialApp.html) | [MediaQuery](http:laomengit.com/flutter/widgets/MediaQuery.html) | [MediaQueryData](http:laomengit.com/flutter/widgets/MediaQuery.html#MediaQueryData) | [OutlineButton](http:laomengit.com/flutter/widgets/Button.html#OutlineButton) | [Padding](http:laomengit.com/flutter/widgets/Padding.html) |
[PageView](http:laomengit.com/flutter/widgets/PageView.html) | [Radio](http:laomengit.com/flutter/widgets/Radio.html) | [RaisedButton](http:laomengit.com/flutter/widgets/Button.html#RaisedButton) | [RefreshIndicator](http:laomengit.com/flutter/widgets/RefreshIndicator.html) | [RefreshProgressIndicator](http:laomengit.com/flutter/widgets/ProgressIndicator.html#RefreshProgressIndicator) |
[RichText](http:laomengit.com/flutter/widgets/RichText.html) | [Column](http:laomengit.com/flutter/widgets/Column.html) | [Scaffold](http:laomengit.com/flutter/widgets/Scaffold.html) | [SimpleDialog](http:laomengit.com/flutter/widgets/Dialog.html#SimpleDialog) | [SizedBox](http:laomengit.com/flutter/widgets/ConstrainedBox.html#SizedBox) |
[Slider](http:laomengit.com/flutter/widgets/Slider.html) | [Stack](http:laomengit.com/flutter/widgets/Stack.html) | [Switch](http:laomengit.com/flutter/widgets/Switch.html) | [TabBar](http:laomengit.com/flutter/widgets/TabBar.html) | [TabBarView](http:laomengit.com/flutter/widgets/TabBar.html#TabBarView) |
[Table](http:laomengit.com/flutter/widgets/Table.html) | [Text](http:laomengit.com/flutter/widgets/Text.html) | [TextField](http:laomengit.com/flutter/widgets/TextField.html) | [VerticalDivider](http:laomengit.com/flutter/widgets/Divider.html#VerticalDivider) | [showCupertinoModalPopup](http:laomengit.com/flutter/widgets/showDialog.html#showCupertinoModalPopup) |
[showMenu](http:laomengit.com/flutter/widgets/showDialog.html#showMenu) | [showModalBottomSheet](http:laomengit.com/flutter/widgets/showDialog.html#showModalBottomSheet) |
### 查询组件(117)
1| 2 |3 | 4| 5|
-|-|-|-|-
[AbsorbPointer](http:laomengit.com/flutter/widgets/AbsorbPointer.html) | [AlignTransition](http:laomengit.com/flutter/widgets/AlignTransition.html) | [AnimatedAlign](http:laomengit.com/flutter/widgets/AnimatedAlign.html) | [AnimatedBuilder](http:laomengit.com/flutter/widgets/AnimatedBuilder.html) | [AnimatedContainer](http:laomengit.com/flutter/widgets/AnimatedContainer.html) |
[AnimatedCrossFade](http:laomengit.com/flutter/widgets/AnimatedCrossFade.html) | [AnimatedDefaultTextStyle](http:laomengit.com/flutter/widgets/AnimatedDefaultTextStyle.html) | [AnimatedIcon](http:laomengit.com/flutter/widgets/AnimatedIcon.html) | [AnimatedModalBarrier](http:laomengit.com/flutter/widgets/AnimatedModalBarrier.html) | [AnimatedOpacity](http:laomengit.com/flutter/widgets/AnimatedOpacity.html) |
[AnimatedPadding](http:laomengit.com/flutter/widgets/AnimatedPadding.html) | [AnimatedPositioned](http:laomengit.com/flutter/widgets/AnimatedPositioned.html) | [AnimatedPositionedDirectional](http:laomengit.com/flutter/widgets/AnimatedPositionedDirectional.html) | [AssetImage](http:laomengit.com/flutter/widgets/Icon.html#AssetImage) | [BackButton](http:laomengit.com/flutter/widgets/Button.html#BackButton) |
[BackdropFilter](http:laomengit.com/flutter/widgets/BackdropFilter.html) | [Banner](http:laomengit.com/flutter/widgets/Banner.html) | [ButtonBar](http:laomengit.com/flutter/widgets/Button.html#ButtonBar) | [CheckboxListTile](http:laomengit.com/flutter/widgets/Checkbox.html#CheckboxListTile) | [CheckedModeBanner](http:laomengit.com/flutter/widgets/Banner.html#CheckedModeBanner) |
[ClipOval](http:laomengit.com/flutter/widgets/Clip.html#ClipOval) | [ClipPath](http:laomengit.com/flutter/widgets/Clip.html#ClipPath) | [ClipRRect](http:laomengit.com/flutter/widgets/Clip.html#ClipRRect) | [ClipRect](http:laomengit.com/flutter/widgets/Clip.html#ClipRect) | [CloseButton](http:laomengit.com/flutter/widgets/Button.html#CloseButton) |
[ColorFiltered](http:laomengit.com/flutter/widgets/ColorFiltered.html) | [ConstrainedBox](http:laomengit.com/flutter/widgets/ConstrainedBox.html) | [CupertinoActionSheet](http:laomengit.com/flutter/widgets/CupertinoActionSheet.html) | [CupertinoActionSheetAction](http:laomengit.com/flutter/widgets/CupertinoActionSheet.html#CupertinoActionSheetAction) | [CupertinoApp](http:laomengit.com/flutter/widgets/MaterialApp.html#CupertinoApp) |
[CupertinoButton](http:laomengit.com/flutter/widgets/Button.html#CupertinoButton) | [CupertinoNavigationBar](http:laomengit.com/flutter/widgets/CupertinoNavigationBar.html) | [CupertinoPageScaffold](http:laomengit.com/flutter/widgets/CupertinoPageScaffold.html) | [CupertinoPicker](http:laomengit.com/flutter/widgets/CupertinoPicker.html) | [CupertinoSlider](http:laomengit.com/flutter/widgets/Slider.html#CupertinoSlider) |
[CupertinoSliverRefreshControl](http:laomengit.com/flutter/widgets/RefreshIndicator.html#CupertinoSliverRefreshControl) | [CupertinoSwitch](http:laomengit.com/flutter/widgets/Switch.html#CupertinoSwitch) | [CupertinoTabBar](http:laomengit.com/flutter/widgets/CupertinoTabBar.html) | [CupertinoTabScaffold](http:laomengit.com/flutter/widgets/CupertinoTabScaffold.html) | [CupertinoTabView](http:laomengit.com/flutter/widgets/CupertinoTabBar.html#CupertinoTabView) |
[CupertinoTextField](http:laomengit.com/flutter/widgets/TextField.html#CupertinoTextField) | [CustomClipper](http:laomengit.com/flutter/widgets/Clip.html#CustomClipper) | [DataCell](http:laomengit.com/flutter/widgets/DataTable.html#DataCell) | [DataColumn](http:laomengit.com/flutter/widgets/DataTable.html#DataColumn) | [DataColumn](http:laomengit.com/flutter/widgets/DataTable.html#DataColumn) |
[DataRow](http:laomengit.com/flutter/widgets/DataTable.html#DataRow) | [DatePicker](http:laomengit.com/flutter/widgets/DatePicker.html) | [DecoratedBoxTransition](http:laomengit.com/flutter/widgets/DecoratedBoxTransition.html) | [DefaultTextStyleTransition](http:laomengit.com/flutter/widgets/DefaultTextStyleTransition.html) | [Dismissible](http:laomengit.com/flutter/widgets/Dismissible.html) |
[DragTarget](http:laomengit.com/flutter/widgets/Draggable.html#DragTarget) | [Draggable](http:laomengit.com/flutter/widgets/Draggable.html) | [DraggableScrollableSheet](http:laomengit.com/flutter/widgets/DraggableScrollableSheet.html) | [ExpansionPanelList](http:laomengit.com/flutter/widgets/ExpansionPanelList.html) | [ExpansionTile](http:laomengit.com/flutter/widgets/ExpansionTile.html) |
[FadeInImage](http:laomengit.com/flutter/widgets/FadeInImage.html) | [FadeTransition](http:laomengit.com/flutter/widgets/FadeTransition.html) | [FittedBox](http:laomengit.com/flutter/widgets/FittedBox.html) | [FloatingActionButton](http:laomengit.com/flutter/widgets/FloatingActionButton.html) | [Form](http:laomengit.com/flutter/widgets/Form.html) |
[FormField](http:laomengit.com/flutter/widgets/Form.html#FormField) | [FutureBuilder](http:laomengit.com/flutter/widgets/FutureBuilder.html) | [GridPaper](http:laomengit.com/flutter/widgets/GridPaper.html) | [IconButton](http:laomengit.com/flutter/widgets/Button.html#IconButton) | [IgnorePointer](http:laomengit.com/flutter/widgets/AbsorbPointer.html#IgnorePointer) |
[LayoutBuilder](http:laomengit.com/flutter/widgets/LayoutBuilder.html) | [LicensePage](http:laomengit.com/flutter/widgets/LicensePage.html) | [LimitedBox](http:laomengit.com/flutter/widgets/ConstrainedBox.html#LimitedBox) | [ListTile](http:laomengit.com/flutter/widgets/ListTile.html) | [ListWheelScrollView](http:laomengit.com/flutter/widgets/ListWheelScrollView.html) |
[LongPressDraggable](http:laomengit.com/flutter/widgets/Draggable.html#LongPressDraggable) | [ModalBarrier](http:laomengit.com/flutter/widgets/ModalBarrier.html) | [Opacity](http:laomengit.com/flutter/widgets/Opacity.html) | [Overlay](http:laomengit.com/flutter/widgets/Overlay.html) | [Placeholder](http:laomengit.com/flutter/widgets/Placeholder.html) |
[PopupMenuButton](http:laomengit.com/flutter/widgets/Button.html#PopupMenuButton) | [Positioned](http:laomengit.com/flutter/widgets/Positioned.html) | [PositionedDirectional](http:laomengit.com/flutter/widgets/PositionedDirectional.html) | [PositionedTransition](http:laomengit.com/flutter/widgets/PositionedTransition.html) | [RawMaterialButton](http:laomengit.com/flutter/widgets/Button.html#RawMaterialButton) |
[RelativePositionedTransition](http:laomengit.com/flutter/widgets/RelativePositionedTransition.html) | [ReorderableListView](http:laomengit.com/flutter/widgets/ReorderableListView.html) | [RotationTransition](http:laomengit.com/flutter/widgets/RotationTransition.html) | [SafeArea](http:laomengit.com/flutter/widgets/SafeArea.html) | [ScaleTransition](http:laomengit.com/flutter/widgets/ScaleTransition.html) |
[SelectableText](http:laomengit.com/flutter/widgets/SelectableText.html) | [ShaderMask](http:laomengit.com/flutter/widgets/ShaderMask.html) | [SizeTransition](http:laomengit.com/flutter/widgets/SizeTransition.html) | [SlideTransition](http:laomengit.com/flutter/widgets/SlideTransition.html) | [SliverAppBar](http:laomengit.com/flutter/widgets/SliverAppBar.html) |
[SliverGrid](http:laomengit.com/flutter/widgets/SliverList.html#SliverGrid) | [SliverList](http:laomengit.com/flutter/widgets/SliverList.html) | [SnackBar](http:laomengit.com/flutter/widgets/SnackBar.html) | [Spacer](http:laomengit.com/flutter/widgets/Flexible.html#Spacer) | [StreamBuilder](http:laomengit.com/flutter/widgets/StreamBuilder.html) |
[SwitchListTile](http:laomengit.com/flutter/widgets/Switch.html#SwitchListTile) | [TableCell](http:laomengit.com/flutter/widgets/Table.html#TableCell) | [TableRow](http:laomengit.com/flutter/widgets/Table.html#TableRow) | [TextAlign](http:laomengit.com/flutter/widgets/TextAlign.html) | [TextFormField](http:laomengit.com/flutter/widgets/Form.html#TextFormField) |
[TimePicker](http:laomengit.com/flutter/widgets/DatePicker.html#TimePicker) | [ToggleButtons](http:laomengit.com/flutter/widgets/ToggleButtons.html) | [Tooltip](http:laomengit.com/flutter/widgets/Tooltip.html) | [Transform](http:laomengit.com/flutter/widgets/Transform.html) | [TweenAnimationBuilder](http:laomengit.com/flutter/widgets/TweenAnimationBuilder.html) |
[UnconstrainedBox](http:laomengit.com/flutter/widgets/ConstrainedBox.html#UnconstrainedBox) | [ValueListenableBuilder](http:laomengit.com/flutter/widgets/ValueListenableBuilder.html) | [ValueListenableBuilder](http:laomengit.com/flutter/widgets/ValueListenableBuilder.html) | [WidgetsApp](http:laomengit.com/flutter/widgets/WidgetsApp.html) | [Wrap](http:laomengit.com/flutter/widgets/Wrap.html) |
[showAboutDialog](http:laomengit.com/flutter/widgets/showDialog.html#showAboutDialog) | [showBottomSheet](http:laomengit.com/flutter/widgets/showDialog.html#showBottomSheet) | [showCupertinoDialog](http:laomengit.com/flutter/widgets/showDialog.html#showCupertinoDialog) | [showDialog](http:laomengit.com/flutter/widgets/showDialog.html) | [showGeneralDialog](http:laomengit.com/flutter/widgets/showDialog.html#showGeneralDialog) |
[showLicensePage](http:laomengit.com/flutter/widgets/showDialog.html#showLicensePage) | [showSearch](http:laomengit.com/flutter/widgets/showDialog.html#showSearch) |
## 项目介绍
### Flutter Fly(展翅高飞)
地址:[https://github.com/781238222/flutter-do/tree/master/flutter_fly](https://github.com/781238222/flutter-do/tree/master/flutter_fly)



### Flutter App升级
地址:[https://github.com/781238222/flutter-do/tree/master/flutter_upgrade](https://github.com/781238222/flutter-do/tree/master/flutter_upgrade)




### 验证码输入框
地址:[https://github.com/781238222/flutter-do/tree/master/flutter_verification_box](https://github.com/781238222/flutter-do/tree/master/flutter_verification_box)


### 弹幕
地址:[https://github.com/781238222/flutter-do/tree/master/flutter_barrage_sample](https://github.com/781238222/flutter-do/tree/master/flutter_barrage_sample)




### 字幕
地址:[https://github.com/781238222/flutter-do/tree/master/flutter_subtitle_example](https://github.com/781238222/flutter-do/tree/master/flutter_subtitle_example)



### 带动画效果的PageView
- [Travel Cards](https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/parallax_travel_cards_list)
- [Mindfullness Gooey Transition](https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/gooey_edge)
- [page-transformer](https://github.com/roughike/page-transformer)
- [transformer_page_view](https://github.com/best-flutter/transformer_page_view)
- [smooth_page_indicator](https://github.com/Milad-Akarie/smooth_page_indicator)
### 带动画效果的底部导航
- [Fluid Button Bar](https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/fluid_nav_bar)
- [Icon Flip Button Bar](https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/bubble_tab_bar)
- [fancy_bottom_navigation](https://github.com/tunitowen/fancy_bottom_navigation)
- [circular_bottom_navigation](https://github.com/imaNNeoFighT/circular_bottom_navigation)
- [bottom_navy_bar](https://github.com/pedromassango/bottom_navy_bar)
- [titled_navigation_bar](https://github.com/pedromassango/titled_navigation_bar)
## Flutter 完整项目及功能性项目
1. Flutter Fly(展翅高飞):[https://github.com/781238222/flutter-do/tree/master/flutter_fly](https://github.com/781238222/flutter-do/tree/master/flutter_fly)
2. Flutter App升级功能:[https://github.com/781238222/flutter-do/tree/master/flutter_upgrade](https://github.com/781238222/flutter-do/tree/master/flutter_upgrade)
3. FlutterExampleApps 收集了大量youtube视频:[https://github.com/iampawan/FlutterExampleApps](https://github.com/iampawan/FlutterExampleApps)
4. flutter-go,不解释,或许这是你最早接触的Flutter资源:[https://github.com/alibaba/flutter-go](https://github.com/alibaba/flutter-go)
5. FlutterScreens,漂亮的UI库,学习阶段建议不要使用[https://github.com/samarthagarwal/FlutterScreens](https://github.com/samarthagarwal/FlutterScreens)
6. Flutter豆瓣客户端,完成度比较高的项目:[https://github.com/kaina404/FlutterDouBan](https://github.com/kaina404/FlutterDouBan)
7. MVC模式的项目结构:[https://github.com/brianegan/flutter_architecture_samples](https://github.com/brianegan/flutter_architecture_samples)
8. 开源Github客户端:[https://github.com/CarGuo/gsy_github_app_flutter](https://github.com/CarGuo/gsy_github_app_flutter)
9. HistoryOfEverything,非常酷炫的项目:[https://github.com/2d-inc/HistoryOfEverything](https://github.com/2d-inc/HistoryOfEverything)
10. WanAndroid客户端:[https://github.com/Sky24n/flutter_wanandroid](https://github.com/Sky24n/flutter_wanandroid)
11. Best-Flutter-UI-Templates,非常漂亮的一个App:[https://github.com/mitesh77/Best-Flutter-UI-Templates](https://github.com/mitesh77/Best-Flutter-UI-Templates)
12. flutter_deer:[https://github.com/simplezhli/flutter_deer](https://github.com/simplezhli/flutter_deer)
13. FlutterFoodybite:[https://github.com/JideGuru/FlutterFoodybite](https://github.com/JideGuru/FlutterFoodybite)
14. 开源中国客户端:[https://github.com/yubo725/flutter-osc](https://github.com/yubo725/flutter-osc)
15. Flutter 高仿知乎 UI:[https://github.com/xujiyou/zhihu-flutter](https://github.com/xujiyou/zhihu-flutter)
16. 高仿书旗小说 Flutter版:[https://github.com/huanxsd/flutter_shuqi](https://github.com/huanxsd/flutter_shuqi)
17. flutter 下拉刷新:[https://github.com/xuelongqy/flutter_easyrefresh](https://github.com/xuelongqy/flutter_easyrefresh)
18. 仿网易云音乐:[https://github.com/boyan01/flutter-netease-music](https://github.com/boyan01/flutter-netease-music)
19. 玩Android客户端:[https://github.com/phoenixsky/fun_android_flutter](https://github.com/phoenixsky/fun_android_flutter)
20. Flutter淘宝App:[https://github.com/GanZhiXiong/GZXTaoBaoAppFlutter](https://github.com/GanZhiXiong/GZXTaoBaoAppFlutter)
21. 交错GridView(可以实现瀑布流):[https://github.com/letsar/flutter_staggered_grid_view](https://github.com/letsar/flutter_staggered_grid_view)
22. 渲染Markdown:[https://github.com/flutter/flutter_markdown](https://github.com/flutter/flutter_markdown)
23. 图标 [https://github.com/imaNNeoFighT/fl_chart](https://github.com/imaNNeoFighT/fl_chart)
24. 城市列表,联系人列表,索引&悬停:[https://github.com/flutterchina/azlistview](https://github.com/flutterchina/azlistview)
25. [FlutterUnit](https://github.com/toly1994328/FlutterUnit)
26. [Html解析器](https://github.com/houzhenpu/flutter_html_text)
27. [markdown 解析器](https://github.com/flutter/flutter_markdown)
28. [人人影视客户端](https://github.com/Vove7/yyets_flutter)