November 4, 2020

446 words 3 mins read

Chromicle/awesome-flutter-ui

Chromicle/awesome-flutter-ui

awesome flutter(android, ios) UI examples :zap: - login, books, profile, food order, walkthrough, widgets

repo name Chromicle/awesome-flutter-ui
repo link https://github.com/Chromicle/awesome-flutter-ui
homepage
language Dart
size (curr.) 14923 kB
stars (curr.) 122
created 2020-05-10
license MIT License

Flutter UI/UX Examples 🍟

Repo Flutter

Looking for an awesome UI kit for Flutter? Here is a curated list of a few awesome Flutter UI/UX Examples.

Show some ❀️ and star the repo to support the project

Index πŸ“

  1. Login Page
  2. Books App
  3. Profile Page
  4. Food order app
  5. Walkthrough Screen

1. Login Page UI 🍦

GIF Screenshot

Packages in use:

  1. flutter_svg
  2. flutter_screenutil

Fonts

  1. Poppins

2. Books app UI 🍨

GIF Screenshot

Packages in use:

  1. flutter_svg
  2. flutter_staggered_grid_view

Fonts

  1. Poppins

3. Profile Page UI 🍧

GIF Screenshot

Packages in use:

  1. flutter_svg
  2. flutter_screenutil
  3. line_awesome_flutter

Fonts

  1. Poppins (Custom Fonts)

4. Food Order app πŸŽ‚

GIF Screenshot

Packages in use:

  1. flutter_svg
  2. line_awesome_flutter

5. Walkthrough Screen πŸŽ‚

This is a little special… Guess what?
I implemented this in Kotlin! 😱
This is the walk-through screen, that you can adapt according to your use, by changing images and number of screens. The top slider will scroll on any amount of screens you add!

GIF Screenshot

Resources:

  1. Animations: cubic briezer
  2. Primary color: #6C63FF
  3. Images: undraw.co

Fonts

  1. Poppins

Widgets :rocket:

List of well-designed widgets that you will actually need and find useful rather than overwhelming you with a plethora of low-quality ones.

Index πŸ“

  1. Rounded input field
  2. Flushbar alert service

1. Rounded Input field 🍦

GIF

Use

RoundedInputField(
    textEditingController: controllerName,
    hintText: "Your Email",
    icon: Icons.email,
    cursorColor: Colors.black,
    editTextBackgroundColor: Colors.grey[200],
    iconColor: Colors.black,
    onChanged: (value) {
      name = value;
     },
 )

2. Flushbar alert service

To use this widget you have to include one denpendency called flushbar in your pubspec.yaml, if you want error alert you have to give AlertType.error in type feild same applies to warning
GIF

Use

CustomButton(
    text: "Add to Cart",
    onPressed: () {
      AlertService().showAlert(
         context: context,
         message: 'product has been added to cart',
         type: AlertType.success,
         );
     },
 )

Designs 🌸

These are the list of designs made by adobe xd and figma etc

Index πŸ“

  1. Camera UI
  2. Doremon

Camera UI πŸ“·

Camera UI

Doremon 🐱

Any doremon fans here? For relaxation I design some of cartoons

Author(s) ✍️

  1. Ajay Prabhakar @chromicle

Looking to contribute? :computer:

Please read CONTRIBUTING.md before writing a pull request. Any and all help we can get is welcome :)

License :memo:

This repository is licensed under MIT License. Find LICENSE to know more.

Note

These examples are open to all kinds of contribution in all of its categories. dude, they are completely free😜
If you found this project useful, then please consider giving it a :star: on Github and sharing it with your friends via social media⚑.
Happy Coding πŸ’».

comments powered by Disqus