Skip to content

Flutter 开发过程中常用的 Widget 与功能实例

Notifications You must be signed in to change notification settings

yangpeng7/flutter_awesome

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

awesome flutter

Flutter Widget 分类

Flutter 项目开发中常用的 Widget 一些基础功能,由于每个 Widget 都有很多的属性,这里只列出了基本也是最常用的属性,更多的用法可以看 Widget 中每个属性的注释。我会持续更新这个 demo 集合,同时后续会增加更多自定义的 Widget。

DemoContainer

Flutter 中最常用的 Widget 之一,可以设置 margin,padding,decoration,等设置复杂效果。

DemoContainer

DemoButton

常用的几种 Button

RaisedButton:Material Design 风格的 Button

FlatButton:扁平化的 Button

OutlineButton:带边框的 Button

IconButton:带 icon 的 Button

DemoButton

DemoClipRRect

使用 ClipRRect 设置圆角。给 Container 设置 BoxDecoration 如果 child 是图片的话圆角是无效的,可以使用 ClipRRect 给图片或者复杂的 Widget 设置圆角。

DemoClipRRect

DemoColumn

列布局,继承自 Flex 可以对主轴和交叉轴进行设置来调整 Column 内的布局方式。

DemoColumn

DemoRow

行布局,和列布局类似,继承自 Flex 可以对主轴和交叉轴进行设置来调整 Row 内的布局方式。

DemoRow

DemoExpanded

Expanded 必须方法 Flex 中,它会把 Flex 剩余的控件撑满,同时还可以给 Expanded 设置撑开的比例。

DemoExpanded

DemoStack

栈布局,就像栈一样一层一层网上叠加,类似于 Android 里的 FrameLayout。可以通过 Positioned Widget 设置子 Widget 的位置。

DemoStack

DemoVisibility

控制 Widget 的隐藏和显示。

DemoVisibility

DemoOffstage

和 Visibility 类似控制 Widget 的隐藏和显示,比 Visibility 拥有更多的属性,可以在 Widget 隐藏之后不占用屏幕空间。

DemoOffstage

DemoSafeArea

安全区域,加上之后会自动适配 Android 或者 iOS 的刘海屏。

DemoSafeArea

DemoPopMenuButton

弹出选择 Widget,有时候并不能完全满足我们的需求。

DemoPopMenuButton

DemoBottomSheet

底部弹出 Widget。

DemoBottomSheet

DemoBottomModalSheet

模态的底部弹出 Widget。

DemoBottomModalSheet

DemoRefreshIndicator

Android 风格的下拉刷新

DemoRefreshIndicator

DemoBottomNavigationBar

底部导航

DemoBottomNavigationBar

DemoDrawer

抽屉效果。

DemoDrawer

DemoClip

Widget 裁剪。可以利用

ClipOval 裁剪出圆形、椭圆形

ClipRRect 裁剪圆角矩形

ClipRect 裁剪矩形

ClipPath 自定义裁剪路径

DemoClip

DemoBackdropFilter

BackdropFilter 可以实现背景模糊

DemoBackdropFilter

DemoCustomPainter

CustomPainter 可以自定义painter绘制点、线、圆、扇形、弧形或定义路径实现复杂形状

DemoCustomPainter

DemoNavigationRail

响应式导航

DemoNavigationRail

DemoSliverAppBarBasic

SliverAppBar的基本使用

DemoSliverAppBarBasic

DemoSliverAppBarAdvance

SliverAppBar 和 TabBarView 一起使用

DemoSliverAppBarAdvance

DemoCustomScrollView

自定义 CustomScrollView 支持嵌套各种布局,如 List、Grid 等

DemoCustomScrollView

DemoScrollController

滚动控制器,可以监听滚动过程中的位移。

DemoScrollController

DemoScrollNotification

滚动监听,可以监听滚动过程中的位移。

DemoScrollNotification

DemoRefreshLoadMore

简单自定义的下拉刷新和加载更多

DemoRefreshLoadMore

DemoCustomTimePicker

自定义时间选择控件

DemoCustomTimePicker

DemoLifecycle

StatefulWidget 生命周期

DemoLifecycle

DemoStateProvider

使用 Provider 实现的状态管理

DemoStateProvider

DemoInheritedWidget

About

Flutter 开发过程中常用的 Widget 与功能实例

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages