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.
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:
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.
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
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.
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.
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.
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.
A simple Flutter app to Read and Download books. The Books included in the app are from the Public Domain
- Download eBooks
- Read eBooks
- Dark Mode
- Swipe to delete downloads.
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
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.
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 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.
This template is a ready-to-publish e-commerce app developed with Firebase, Stripe, and Razorpay. It has a built-in admin dashboard.
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 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( width: 100, height: 100, color: Colors.red, )
SizedBox( width: 100, height: 100, child: Container( color: Colors.red, ), )
ConstrainedBox( constraints: BoxConstraints.expand(), child: Container( color: Colors.red, ))
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, ) ], )
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( 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( alignment: Alignment.topLeft, child: Container( width: 80, height: 80, color: Colors.blue, child: Center(child: Text('topLeft')), ), )
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, ), ) ], )
Scaffold( appBar: AppBar(title: Text('Drawer')), drawer: Drawer(), )
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'), ], ), )
ListView( padding: const EdgeInsets.all(8), children: <Widget>[ Container( height: 50, color: Colors.blue, child: const Center(child: Text('Item A')), ), Container( height: 50, color: Colors.blue, child: const Center(child: Text('Item B')), ), Container( height: 50, color: Colors.blue, child: const Center(child: Text('Item C')), ), ], )
GridView.count( crossAxisCount: 2, children: <Widget>[ Container( color: Colors.red, ), Container( color: Colors.green, ), Container( color: Colors.blue, ), ], )
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, child: const Center(child: Text('Item A')), ), Container( height: 50, color: Colors.orange, child: const Center(child: Text('Item B')), ), Container( height: 50, color: Colors.orange, child: const Center(child: Text('Item C')), ), ], ), ) ] )
Flutter App Development
What is Flutter?
Flutter is a new, open-source mobile app framework that helps developers to design and build beautiful native interfaces for both iOS and Android apps. It can be used with existing code, or within existing codebases.
Flutter works by compiling the Dart programming language into machine code ahead of runtime. The compiled code then gets delivered to the device and executes on a native layer that is part of both iOS and Android.
As a result, Flutter apps are high-performance with hardware acceleration support for 60fps rendering (even in split screen).
Further benefits include 100% app share between iOS & Android because it uses one set of source code, no need for separate repos or project management; platform channels allow developers to write plugins as needed so they can add functionality over time without having to recompile their application.
Why developers love using flutter:
- Faster than native Android framework and iOS SDK because of Composition Model that only re-draws what has changed (i.e. no expensive layout updates).
- Design philosophy of “everything is a widget” means developers can compose complex UIs from smaller, individual widgets to build up bigger components or templates.
- If you are a Flutter user, the best way to get support is mailing list and Stack Overflow – Google Groups for Dart language users who want help with coding in their own environment outside the official channels on GitHub accessible by all contributors regardless of skill.
Flutter vs native:
Compared to native apps, Flutter apps are written in Dart and compiled to run on both Android as well as iOS. That way developers can write an application once without having to learn two different programming languages for each platform.
Flutter is still a new framework, so it does not yet have all the features of native development; however with time this will change. Dart is designed explicitly for building UI’s where performance matters. It’s a typed language that optionally affords strong type checking during compile-time rather than at runtime.
Best tools to create Flutter app templates
Have you been looking for the best tools to create Flutter templates? If so, then these 3 tools is just what you need.
Figma is a design tool for conceptualizing, prototyping and sharing interactive designs. It’s easy to use so it’s perfect for both novice designers and experts.
Figma users design their ideas in HTML or Sketch files and convert them into high fidelity prototypes without code because we understand that designers deserve a better software experience than what existing tools offer. There are no limitations here: just drag and drop your way to building beautiful interfaces with fully responsive interactivity for all types of devices without writing any code.
Adobe XD is a design tool that helps you create fluid, responsive, and adaptive prototypes for both web and mobile. It’s a lightweight yet powerful environment.
Adobe XD lets you create the designs for tomorrow. With a drag-and-drop interface, enhanced UI controls and intuitive workflows, you can focus on design without tackling anything else. Get up to speed in minutes with their easy tutorials that will get your projects off the ground fast!
You can even import your Sketch files or collaborate seamlessly with other Adobe Creative Suite apps by sharing project workspaces online through Creative Cloud Libraries.
Canva is the free graphic design tool that can help you create beautiful online visuals and strong presentations. Canva is the perfect partner for your design needs. It’s easy to use, affordable and prettifies your pictures so you can create professional looking content in minutes.
With Canva’s modern interface, helpful tutorials and intuitive features it will become an instant favorite of any experience level – with no need for fancy editing skills!
- Learn Flutter – This is a list of resources to learn Flutter, including blogs, online courses, tutorials. Furthermore, it introduces themes and must-have plugins to enhance your Flutter project.
- Make Games with Flutter – Find out how developers are making games using Flutter.
- Flutter Color Generator Tool – This simple tool helps you pick a color and generate Material Color codes to use in a Flutter app.
- Flutter Boilerplates and Snippets – Generate boilerplate codes for certain design.
- Awesome Flutter Animations – This Flutter repository in hope to showcase built-in animation widgets and some popular libraries.
- Amazing Apps Built with Flutter – A collection of Flutter apps made by big companies.