Best Free Flutter App Templates & UI Kits

Flutter allows you to build beautiful apps on desktop, mobile, and web from a single codebase. If you are finding Flutter app templates to kickstart your project, this is the right place.

Flutter UI Snippets

This tool is a collection of UI components which are often used in a Flutter app, they can be whole screen pages (layout), or small widgets (block) like Button, Text, AppBar.

Note: This is an ongoing project, more templates will be added over time. You can download the Android app for this snippet section.

Free Flutter Templates & UI Kits

These templates and UI kits only contains UI part. There is no functional features.

Following are the best free flutter templates and UI kits:

mitesh77’s templates

A collection of beautiful and modern UI templates for Flutter, including fitness, hotel, medical themes.

Grocery UI Kit

This app is based on a course from Udemy with the dev’s own customization to make the app look better.

  • Design for grocery app
  • Fancy bottom bar

iampawan’s various UI kits

The goal of this project is to provide an ultimate collection of real world app’s UIs. It is also intended to showcase good app structure and a clean, well-organized Flutter codebase.

  • Templates Category: Currently Available
  • Profile: View Profile, Profile 2
  • Shopping: Shopping List, Shopping Details, Product Details
  • Login: Login With OTP, Login 2
  • Timeline: Feed, Tweets
  • Dashboard: Dashboard 1, Dashboard 2
  • Settings: Device Settings
  • No Item: No Search Result
  • Payment: Credit Card, Payment Success

UI Nice

More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

Task Planner

This is an UI kit for a task planner type of app. The design is based on Task Planner App designed by Purrweb UI.

UI Challenges

This repository contains over 100+ professional UI implementations with source code in Flutter. They are available in Android, iOS, Linux and Web. The list consists of Animation Examples UI, Ecommerce UIs, Login/signup UIs, Settings UIs, Dashboard UIs, Quotes App UIs, Motorbike App UIs, Profile UIs, Invitation App UIs, Lists UIs, Navigation UIs, Onboarding UIs, Miscellaneous UIs, Blog UIs, Food App UIs, Quiz App UIs, Todo App UIs, Hotel App UIs, Travel App UIs, Grocery App UI Kit, Bank App Clone, Furniture App UI.

Restaurant

Flutter representation of a full Restaurant app UI kit. It features popular dish widget, dish detail, category page, checkout page, and user profile page.

Flutter App Templates

These apps contains both UI and functional features. Most are ready to be used in production.

Quiz Source Code – Flutter For Web

This is a quiz app source code written with Flutter for Web.

  • Quizzes are stored in JSON files
  • Support text and image question types
  • State management with Provider.
  • Answer with letter buttons.

eBook

A simple Flutter app to Read and Download books. The Books included in the app are from the Public Domain 

  • Download eBooks
  • Read eBooks
  • Favorites
  • Dark Mode
  • Swipe to delete downloads.


Flutter Lenny Face Keyboard

Lenny Face Keyboard allows user to choose from thousands of text and lenny face emojis. 

  • Pre-defined emojis in several categories such as happy, shocked, sad, etc..
  • Users can create/delete custom emoji
  • One-click to copy emoji
  • Recent copied emojis

Flutter Tip Calculator

This is a simple calculator written in Flutter.

  • Result in AlertDialog
  • Wave Curved AppBar
  • Percentage of the used tip is stored.
  • Share plugin

Premium Flutter Templates & UI Kits

All premium templates – These can be Flutter UI kits which can be used in any apps or can be themes designed for a certain type of Flutter app such as travel, ecommerce.

E-Commerce UI KIT

E-Commerce UI KIT

This kit is a modern Flutter template for e-commerce apps in mobile devices. It comes with 32 screens with a different type of shop-oriented UI.

ProKit

ProKit

ProKit is a big collection of templates, UI components made for many types of apps. it has different templates for different business such as ecommerce shop, online education system, digital wallet, and movie streaming.

Shoppers

Shoppers

This template is a ready-to-publish e-commerce app developed with Firebase, Stripe, and Razorpay. It has a built-in admin dashboard.

FluxNews

FluxNews

This template turns your WordPress into an Android and iOS app via WordPress’s Rest API.

Fluxstore WooCommerce

Fluxstore WooCommerce

Fluxstore is a complete solution to sell your products in a beautiful app with high productivity and cost-efficiency.

Layout Cheat Sheets

Container

Container

Container(
  width: 100,
  height: 100,
  color: Colors.red,
)

SizedBox

SizedBox(
	width: 100,
	height: 100,
	child: Container(
	  color: Colors.red,
	),
)

ConstrainedBox

ConstrainedBox(
  constraints: BoxConstraints.expand(),
  child: Container(
    color: Colors.red,
))

Horizontal Layout

Row

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    )
  ],
)

Vertical Layout

Column

Column(
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.center,
	children: [
	  Container(
	      width: 100,
	      height: 100,
	      color: Colors.red,
	    ),
	    Container(
	      width: 100,
	      height: 100,
	      color: Colors.green,
	    ),
	    Container(
	      width: 100,
	      height: 100,
	      color: Colors.blue,
	    )
	],
)

Relative / Absolute Layout

Stack

Stack(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.green,
      ),
      Container(
        width: 60,
        height: 60,
        color: Colors.blue,
      )
    ],
)

Align

Align(
    alignment: Alignment.topLeft,
    child: Container(
      width: 80,
      height: 80,
      color: Colors.blue,
      child: Center(child: Text('topLeft')),
    ),
)

Positioned

Stack(
    children: [
      Positioned(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
      Positioned(
        left: 100,
        child: Container(
          width: 80,
          height: 80,
          color: Colors.green,
        ),
      ),
      Positioned(
        bottom: 0,
        child: Container(
          width: 60,
          height: 60,
          color: Colors.blue,
        ),
      )
    ],
  )

Navigation

Drawer

Scaffold(
      appBar: AppBar(title: Text('Drawer')),
      drawer: Drawer(),
    )

Bottom Bar

Scaffold(
  appBar: AppBar(title: Text('Bottom Navigation')),
  backgroundColor: Colors.blueGrey,
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
    ],
  ),
)

Item List

ListView

ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        height: 50,
        color: Colors.blue[600],
        child: const Center(child: Text('Item A')),
      ),
      Container(
        height: 50,
        color: Colors.blue[500],
        child: const Center(child: Text('Item B')),
      ),
      Container(
        height: 50,
        color: Colors.blue[100],
        child: const Center(child: Text('Item C')),
      ),
    ],
)

GridView

GridView.count(
    crossAxisCount: 2,
    children: <Widget>[
      Container(
        color: Colors.red,
      ),
      Container(
        color: Colors.green,
      ),
      Container(
        color: Colors.blue,
      ),
    ],
  )

SliverList

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Header'),
      backgroundColor: Colors.blue,
      expandedHeight: 300.0,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network('https://cdn.pixabay.com/photo/2017/12/13/16/40/background-3017167_960_720.jpg', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Container(
            height: 50,
            color: Colors.orange[600],
            child: const Center(child: Text('Item A')),
          ),
          Container(
            height: 50,
            color: Colors.orange[500],
            child: const Center(child: Text('Item B')),
          ),
          Container(
            height: 50,
            color: Colors.orange[100],
            child: const Center(child: Text('Item C')),
          ),
        ],
      ),
    )
  ]
)

Flutter App Development

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close