1. styled_widget
styled_widget
是作为一种工具构建的,用于增强您的 Flutter 开发体验并与您的代码库无缝集成。
代码示例:
Icon(OMIcons.home, color: Colors.white)
.padding(all: 10)
.decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)
.padding(all: 15)
.decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)
.padding(all: 20)
.card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
)
.alignment(Alignment.center)
.backgroundColor(Color(0xffEBECF1));
Showcase :
Github:pub.dev/packages/st…
2.flui
一个强大的谷歌 Flutter UI 框架,Code Sample :
FLAppBarTitle(
title: 'AppBar',
subtitle: '(subtitle)',
layout: FLAppBarTitleLayout.vertical,
showLoading: true
)
Github:pub.dev/packages/fl…
3.flutter_screenutil
一个适配屏幕和字体大小的flutter插件。让你的UI在不同的屏幕大小上显示合理的布局!
ScreenUtilInit(
designSize: Size(360, 690),
builder: () => MaterialApp(
...
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
button: TextStyle(fontSize: 45.sp)
),
),
),
)
Github:pub.dev/packages/fl…
4.responsive_framework
响应式框架会自动使您的 UI 适应不同的屏幕尺寸。一次创建您的 UI,并让它在移动设备、平板电脑和台式机上完美显示像素!
MaterialApp(
builder: (context, widget) => ResponsiveWrapper.builder(
child,
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(480, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.resize(1000, name: DESKTOP),
],
background: Container(color: Color(0xFFF5F5F5))),
initialRoute: "/",
)
Github:pub.dev/packages/re…
5.flutter_neumorphic
一个完整的、可使用的、用于Flutter的Neumorphic ui工具包
Neumorphic(
style: NeumorphicStyle(
shape: NeumorphicShape.concave,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
depth: 8,
lightSource: LightSource.topLeft,
color: Colors.grey
),
child: ...
)
Github:pub.dev/packages/fl…
作者:Mirsaid İsmailov