6

Use These Dart/Flutter Packages for More Beautiful UIs

 3 years ago
source link: https://medium.com/flutter-community/use-these-dart-flutter-packages-for-more-beautiful-uis-f3a7787d7ac9
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Use These Dart/Flutter Packages for More Beautiful UIs

1. styled_widget

styled_widget is build as a tool to enhance your Flutter development experience and to seamlessly integrate with your codebase.

Code Sample :

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 :

2. flui

A powerful UI framework for Google Flutter

Code Sample :

FLAppBarTitle(
title: 'AppBar',
subtitle: '(subtitle)',
layout: FLAppBarTitleLayout.vertical,
showLoading: true
)

Showcase :

1*O2L5HLSQbshKLW9dFdXLNQ.png?q=20
use-these-dart-flutter-packages-for-more-beautiful-uis-f3a7787d7ac9

3. flutter_screenutil

A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!

Code Sample :

ScreenUtilInit(
designSize: Size(360, 690),
builder: () => MaterialApp(
...
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
button: TextStyle(fontSize: 45.sp)
),
),
),
)

Showcase :

0*plTEyjTC-xhh6VJI.png?q=20
use-these-dart-flutter-packages-for-more-beautiful-uis-f3a7787d7ac9

4. responsive_framework

Responsive Framework adapts your UI to different screen sizes automatically. Create your UI once and have it display pixel perfect on mobile, tablet, and desktop!

Code Sample :

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: "/",
)

Showcase :

1*QTuAii1fOG4pp0Cxw-AvhQ.gif?q=20
use-these-dart-flutter-packages-for-more-beautiful-uis-f3a7787d7ac9

5. flutter_neumorphic

A complete, ready to use, Neumorphic ui kit for Flutter

Code Sample :

Neumorphic(
style: NeumorphicStyle(
shape: NeumorphicShape.concave,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
depth: 8,
lightSource: LightSource.topLeft,
color: Colors.grey
),
child: ...
)

Showcase :

1*jUXwDKxKCmGi0k4M43Z57A.gif?q=20
use-these-dart-flutter-packages-for-more-beautiful-uis-f3a7787d7ac9

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK