ajay-prabhakar / awesome-flutter-ui

10+ flutter(android, ios) UI design examples :zap: - login, books, profile, food order, movie streaming, walkthrough, widgets

Flutter UI/UX Examples 🍟

Looking for an awesome UI kit for Flutter? Here is a curated list of a few awesome Flutter UI design templates to integrate in your Flutter app and save your time on designing widgets. You can check more UI design templates here.

Show some ❤️ and star ⭐ the repo to support the project

Index 📝

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

1. Login Page UI 🍦

GIF	Screenshot

Packages in use:

1. flutter_svg
2. flutter_screenutil

Fonts

1. Poppins

---

2. Movie Streaming App 🍨

GIF	Screenshot

Packages in use:

1. flutter_svg
2. simple_animations

Fonts

1. Poppins

---

3. Food Order app 🎂

GIF	Screenshot

Packages in use:

1. flutter_svg
2. line_awesome_flutter

---

4. Books app UI 🍨

GIF	Screenshot

Packages in use:

1. flutter_svg
2. flutter_staggered_grid_view

Fonts

1. Poppins

---

5. Profile Page UI 🍧

GIF	Screenshot

Packages in use:

1. flutter_svg
2. flutter_screenutil
3. line_awesome_flutter

Fonts

1. Poppins (Custom Fonts)

---

6. 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 🚀

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,
         );
     },
 )

Doremon 🐱

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

Thanks for coming here from doremon :xD

Author(s) ✍️

1. @chromicle

Looking to contribute? 💻

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

License 📝

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 ⭐ on Github and sharing it with your friends via social media⚡.
Happy Coding 💻.

awesome-flutter-ui's Issues

Typo in readme

There is a typo in the first sentence of the readme

Looking for a awesome UI examples of flutter here is a curated list of awesome Flutter UI/UX Examples.

This should not be a awesome and there are few grammatical mistakes too.

It should be something like:

Looking for awesome examples of UI in Flutter? Here is a curated list of awesome Flutter UI/UX examples!

add CONTRIBUTING.md and LISENCE

As the repo is getting popular and it is good to have contribution guidelines and license

Anyone is welcome to contribute to this issue 😄

Typo in readme

The last line of the readme has a few typos.

These examples are completely opensource any one can use theese exaples for there personal projects

This should be:

These examples are completely open-source anyone can use these examples for their personal projects

Typo in readme

The Note section has a typo.

These examples are completely open-source any one can use theese examples for their personal projects

It should be these instead of theese.