flutter_awesome

KO | EN

gitlite — search

#python #hacktoberfest #android #rust #deep-learning #linux #nodejs #windows #cli #vue #pytorch #ios #mcp #open-source

flutter_awesome

(★ 45)

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

flutter_awesome 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# awesome flutter

[Flutter Widget 分类](https://flutter.dev/docs/development/ui/widgets)

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

## DemoContainer

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

![DemoContainer](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoContainer.gif)

## DemoButton

常用的几种 Button

RaisedButton:Material Design 风格的 Button

FlatButton:扁平化的 Button

OutlineButton:带边框的 Button

IconButton:带 icon 的 Button

![DemoButton](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoButton.gif)

## DemoClipRRect

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

![DemoClipRRect](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoClipRRect.gif)

## DemoColumn

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

![DemoColumn](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoColumn.gif)

## DemoRow

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

![DemoRow](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoRow.gif)

## DemoExpanded

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

![DemoExpanded](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoExpanded.gif)

## DemoStack

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

![DemoStack](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoStack.gif)

## DemoVisibility

控制 Widget 的隐藏和显示。

![DemoVisibility](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoVisibility.gif)

## DemoOffstage

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

![DemoOffstage](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoOffstage.gif)

## DemoSafeArea

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

![DemoSafeArea](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoSafeArea.gif)

## DemoPopMenuButton

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

![DemoPopMenuButton](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoPopMenuButton.gif)

## DemoBottomSheet

底部弹出 Widget。

![DemoBottomSheet](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoBottomSheet.gif)

## DemoBottomModalSheet

模态的底部弹出 Widget。

![DemoBottomModalSheet](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoBottomModalSheet.gif)

## DemoRefreshIndicator

Android 风格的下拉刷新

![DemoRefreshIndicator](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoRefreshIndicator.gif)

## DemoBottomNavigationBar

底部导航

![DemoBottomNavigationBar](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoBottomNavigationBar.gif)

## DemoDrawer

抽屉效果。

![DemoDrawer](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoDrawer.gif)

## DemoClip

Widget 裁剪。可以利用

ClipOval 裁剪出圆形、椭圆形

ClipRRect 裁剪圆角矩形

ClipRect 裁剪矩形

ClipPath 自定义裁剪路径

![DemoClip](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoClip.gif)

## DemoBackdropFilter

BackdropFilter 可以实现背景模糊

![DemoBackdropFilter](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoBackdropFilter.gif)

## DemoCustomPainter

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

![DemoCustomPainter](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoCustomPainter.gif)

## DemoNavigationRail

响应式导航

![DemoNavigationRail](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoNavigationRail.gif)

## DemoSliverAppBarBasic

SliverAppBar的基本使用

![DemoSliverAppBarBasic](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoSliverAppBarBasic.gif)

## DemoSliverAppBarAdvance

SliverAppBar 和 TabBarView 一起使用

![DemoSliverAppBarAdvance](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoSliverAppBarAdvance.gif)

## DemoCustomScrollView

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

![DemoCustomScrollView](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoCustomScrollView.gif)

## DemoScrollController

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

![DemoScrollController](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoScrollController.gif)

## DemoScrollNotification

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

![DemoScrollNotification](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoScrollNotification.gif)

## DemoRefreshLoadMore

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

![DemoRefreshLoadMore](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoRefreshLoadMore.gif)

## DemoCustomTimePicker

自定义时间选择控件

![DemoCustomTimePicker](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoCustomTimePicker.gif)

## DemoLifecycle

StatefulWidget 生命周期

![DemoLifecycle](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoLifecycle.gif)

## DemoStateProvider

使用 Provider 实现的状态管理

![DemoStateProvider](https://raw.githubusercontent.com/yangpeng7/flutter_awesome/master/img/DemoStateProvider.gif)

## DemoInheritedWidget

flutter_awesome

flutter_awesome 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

flutter_awesome

flutter_awesome 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README