# 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)