Top Ten UI UX Packages to Use in Your Next Flutter App

flutter_neumorphic

Neumorphic UI kit for Flutter that is fully functional and ready to use.

Showcase:

Pub link: https://pub.dev/packages/flutter_neumorphic

Installation:

dependencies:
flutter_neumorphic: "<latest_version>"

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class NeumorphicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Neumorphic(
          style: NeumorphicStyle(
            shape: NeumorphicShape.convex,
            boxShape:
            NeumorphicBoxShape.roundRect(BorderRadius.circular(16)),
            depth: 12,
            lightSource: LightSource.top,
            color: Colors.grey),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
              child: NeumorphicText(
                "NeumorphicText",
                style: NeumorphicStyle(
                  depth: 4, //customize depth here
                  color: Colors.white70, //customize color here
                ),
                textStyle: NeumorphicTextStyle(
                  fontSize: 16, //customize size here
                  // AND others usual text style properties (fontFamily, fontWeight, ...)
                ),
              ),
          )),
      ),
    );
  }
}

responsive_framework

Responsive framework dynamically adjusts your UI to multiple screen widths. Create your user interface once, and it will look great on mobile, tablet, and desktop!

Showcase:

Pub link: https://pub.dev/packages/responsive_framework

Installation:

dependencies:
responsive_framework: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class ResponsiveFrameworkDemo extends StatelessWidget {
  static
  const double _maxWidth = 1200;
  static
  const double _minWidth = 450;
  static
  const double _tableWidth1 = 800;
  static
  const double _tableWidth2 = 1000;
  static
  const double _4kWidth = 2460;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
        BouncingScrollWrapper.builder(context, widget),
        defaultScale: true,
        maxWidth: _maxWidth,
        minWidth: _minWidth,
        breakpoints: [
            const ResponsiveBreakpoint.resize(_minWidth, name: MOBILE),
            const ResponsiveBreakpoint.autoScale(_tableWidth1, name: TABLET),
              const ResponsiveBreakpoint.autoScale(_tableWidth2, name: TABLET),
                const ResponsiveBreakpoint.resize(_maxWidth, name: DESKTOP),
                  const ResponsiveBreakpoint.autoScale(_4kWidth, name: "4K"),
          ],
        background: Container(color: Colors.white)),
    );
  }
}

FLUI

FLUI is a robust user interface framework for Google Flutter. A widgets kit and essential modules are included.

Showcase:

Pub link: https://pub.dev/packages/flui

Installation:

dependencies:
flui: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class FluiDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: FLAppBarTitle(
          title: 'flui AppBar',
          subtitle: 'Subtitle here',
          showLoading: true,
          layout: FLAppBarTitleLayout.vertical,
        ),
      ),
    );
  }
}

flutter_screenutil

A Flutter plugin for changing the font and screen size. This allows your UI to exhibit a sensible layout on many screen sizes.

Showcase:

Pub link: https://pub.dev/packages/flutter_screenutil

Installation:

dependencies:
flutter_screenutil: “<latest_version>”

__Code sample: __

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class FlutterScreenUtilDemoApp extends StatelessWidget {
  static
  const double _width = 360;
  static
  const double _height = 690;

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(_width, _height),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: () => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter ScreenUtil Demo',
        theme: ThemeData(
          textTheme: TextTheme(button: TextStyle(fontSize: 24. sp)),
          primarySwatch: Colors.orange,
        ),
        builder: (BuildContext context, Widget child) {
          ScreenUtil.setContext(context);
          return MediaQuery(
            data: MediaQuery.of(context)
            .copyWith(textScaleFactor: 1.0),
            child: child,
          );
        },
        home: HomePage(),
      ),
    );
  }
}

styled_widget

Styled widget is a Flutter development plugin that integrates smoothly with your existing codebase.

Showcase:

Pub link: https://pub.dev/packages/styled_widget

Installation:

dependencies:
styled_widget: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class StyledWidgetDemo extends StatelessWidget {
  Widget elevatedSurface(Widget child) => Styled.widget(child: child)
    .padding(all: 16)
    .decorated(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
    )
    .elevation(8);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: elevatedSurface(Text('Styled widget demo')),
    );
  }
}

calendar_view

A Flutter package that allows you to easily implement all calendar events and calendar UI functionalities.

Showcase:

Pub link: https://pub.dev/packages/calendar_view

Installation:

dependencies:
calendar_view: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class CalenderViewDemo extends StatelessWidget {
  final _eventController = EventController();

  @override
  Widget build(BuildContext context) {
    return CalendarControllerProvider(
      controller: _eventController,
      child: MaterialApp(
        title: 'calendar view demo',
        theme: ThemeData(
          primarySwatch: Colors.orange,
        ),
        home: Scaffold(
          body: MonthView(
            controller: _eventController,
            minMonth: DateTime(2000),
            maxMonth: DateTime(2030),
            initialMonth: DateTime(2022),
            cellAspectRatio: 1,
            onPageChange: (DateTime date, int pageIndex) =>
            print("date, pageIndex"),
            onCellTap: (List < CalendarEventData > events, DateTime date) {
              print(events);
            },
            onEventTap: (CalendarEventData event, DateTime date) =>
            print(event),
            onDateLongPress: (DateTime date) => print(date)),
        ),
      ),
    );
  }
}

Timelines

This is a Flutter timeline package that is both powerful and simple to use. This package’s UI components are all individual widgets.

Showcase:

Pub link: https://pub.dev/packages/timelines

Installation:

dependencies:
timelines: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class TimelineDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timeline demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: Scaffold(
        body: Center(
          child: Timeline.tileBuilder(
            builder: TimelineTileBuilder.fromStyle(
              itemCount: 8,
              contentsAlign: ContentsAlign.alternating,
              contentsBuilder: (BuildContext context, int index) => Padding(
                padding: const EdgeInsets.all(16.0),
                  child: Text('Timeline {index + 1}'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

motion_tab_bar

Motion_tab_bar is an animated bottom navigation bar for Flutter apps, with a customized icon that animates into place.

Showcase:

Pub link: https://pub.dev/packages/motion_tab_bar

Installation:

dependencies:
motion_tab_bar: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
class MotionTabPage extends StatefulWidget {
  @override
  _MotionTabPageState createState() => _MotionTabPageState();
}

class _MotionTabPageState extends State < MotionTabPage >
  with TickerProviderStateMixin {
    MotionTabController _motionTabController;

    @override
    void initState() {
      super.initState();
      _motionTabController = MotionTabController(initialIndex: 1, vsync: this);
    }

    @override
    void dispose() {
      _motionTabController.dispose();
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("Motion Tab"),
            ),
            bottomNavigationBar: MotionTabBar(
              labels: ["Feeds", "Home", "Account"],
              initialSelectedTab: "Home",
              tabIconColor: Colors.blue,
              tabSelectedColor: Colors.orange,
              onTabItemSelected: (int value) {
                setState(() {
                  _motionTabController.index = value;
                });
              },
              icons: [Icons.feed, Icons.home, Icons.account_circle_rounded],
              textStyle: TextStyle(color: Colors.orange),
            ),
            body: MotionTabBarView(
              controller: _motionTabController,
              children: <Widget>[
            Container(
              child: Center(
                child: Text("Feeds"),
              ),
            ),
            Container(
              child: Center(
                child: Text("Home"),
              ),
            ),
            Container(
              child: Center(
                child: Text("Profile"),
              ),
            ),
          ],
        ));
  }
}

Story

Instagram stories-like UI with customizable animations.

Showcase:

Pub link: https://pub.dev/packages/story

Installation:

dependencies:
story: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class StoryDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Story demo',
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: Scaffold(
        body: StoryPageView(
          itemBuilder: (BuildContext context, int pageIndex, int storyIndex) {
            return Center(
              child:
              Text("PageView Index: pageIndex  Story Index: storyIndex"),
            );
          },
          storyLength: (int pageIndex) {
            return 3;
          },
          pageLength: 2,
        )));
  }
}

Getwidget

Getwidget is a completely free Flutter open-source UI library that was created with Flutter SDK to make development easier and more enjoyable than ever before. Getwidget includes over 1,000 pre-built widgets that you can use to create both a mobile app and a web app in Flutter.

Showcase:

Pub link: https://pub.dev/packages/getwidget

Installation:

dependencies:
getwidget: “<latest_version>”

Code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class GetWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'Get Widget Demo',
          theme: ThemeData(
            primarySwatch: Colors.green,
          ),
          home: Scaffold(
            body: Center(
              child: GFCard(
                boxFit: BoxFit.cover,
                title: GFListTile(
                  avatar: GFAvatar(
                    backgroundImage: AssetImage('<avatar image here>'),
                  ),
                  title: Text('Card Title Here'),
                  subTitle: Text('Card Sub Title Here'),
                ),
                content: Text("This is get widget card demo"),
                buttonBar: GFButtonBar(
                  children: <Widget>[
                GFButton(
                  text: 'Subscribe',
                  onPressed: () {},
                ),
                GFButton(
                  text: 'Cancel',
                  onPressed: () {},
                ),
              ],
            ),
          ),
        )));
  }
}