使用这些 Dart/Flutter 包获得更漂亮的 UI

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
)

4.png.png

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…

原文：medium.com/flutter-com…

作者：Mirsaid İsmailov