20+ Best Free Flutter App Templates & UI Kits

A template is a prebuilt project that offers everything you need for building your app – design resources, code samples, and more. Flutter templates can be used to kick-start a project with a variety of fully-functional screens and accompanying business logic. Flutter allows you to build beautiful apps on desktop, mobile, and web from a single codebase. So Flutter templates are not tied to any platform, they can be used with iOS, Android or web as desired.

In addition, Flutter offers pre-built widgets for you to easily create common user interface patterns. These include: Alerts, ListViews, Drawers, Material Design Widgets (buttons with ripple effect), Bottom Navigation bars as well as Floating Action Buttons (FAB) which can be used in any apps.

If you are finding Flutter app templates to start your project, this is the right place. We’ve got some beautiful Flutter UI kits for you! Whether it’s a landing page, marketing site, or admin app – we have something that will complement your needs. Flutter is intuitive and easy to use which will save you time when getting started.

Table of Contents

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 Flutter Template Examples Android app for this snippet section.

Layout

Basic

Social Network

Block

Free Flutter Templates & UI Kits

These Flutter 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. I love these kits since are simple, clean, yet modern.

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

You are looking at the only flutter template kit in this planet that has more than 130+ pages contributed by over 45 developers. The UI Nice is a work of art that will revolutionize how you think as far as the convenience, abilities creates fancy look for your apps. With many templates of different designs for mobile apps with various layouts suitable for all types of purposes, rapid high-quality prototyping is as simple as ever.

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. This template focuses on color which makes each sections different.

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.

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

This kit is a modern Flutter template for e-commerce apps on mobile devices. This Flutter kit comes with 32 screens with a different type of shop-oriented UI for your mobile e-commerce app. It includes a variety of shop UI elements such as product cards, hero headers, fullscreen idents and more. Use the templates to create an engaging experience at every turn!

There are many e-commerce apps out there, and it can be hard to choose the perfect one. Do not struggle like other developers with trying to figure out which colors work best on your app.

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

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

FluxNews

This template turns your WordPress into an Android and iOS app via WordPress’s Rest API. If you have an interest in self-publishing your own Android and iOS apps, Flutter FluxNews will do the hard work for you. This template turns your WordPress into a follow-along app that publishes seamlessly to platforms like Google Play Store and Apple App store. Simply click publish on your Flutter blog post, and it follows suit down below. It’s worth noting that this template is best for those who don’t have extensive knowledge of coding or design, as publishing with this software takes just minutes from start to launch day.

Fluxstore WooCommerce

Fluxstore is a complete solution to sell your products in a beautiful app with high productivity and cost-efficiency. It is a cutting edge app that is perfect for businesses. With the design of friendly, intuitive interface and an excellent package based pricing plan with low commission fees to grow your business in a gentle way on global market, Fluxstore helps you easily turn frustration into success!

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')),
          ),
        ],
      ),
    )
  ]
)