{"id":13553936,"url":"https://github.com/ckdevrel/flutter-examples","last_synced_at":"2026-01-28T07:20:33.209Z","repository":{"id":41454798,"uuid":"145332512","full_name":"ckdevrel/flutter-examples","owner":"ckdevrel","description":"An ultimate cheatbook of curated designs","archived":false,"fork":false,"pushed_at":"2020-06-23T16:15:14.000Z","size":326,"stargazers_count":936,"open_issues_count":0,"forks_count":147,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-11-04T01:33:01.520Z","etag":null,"topics":["flutter","flutter-android","flutter-apps","flutter-demo","flutter-design","flutter-examples","flutter-layouts","flutter-material","flutter-package","flutter-plugin","flutter-samples","flutter-ui","flutter-widget","flutterwave","layouts"],"latest_commit_sha":null,"homepage":"http://flutterexamples.com/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ckdevrel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-19T19:41:38.000Z","updated_at":"2024-10-26T19:06:39.000Z","dependencies_parsed_at":"2022-09-22T14:24:27.597Z","dependency_job_id":null,"html_url":"https://github.com/ckdevrel/flutter-examples","commit_stats":null,"previous_names":["ckdevrel/flutter-examples"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckdevrel%2Fflutter-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckdevrel%2Fflutter-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckdevrel%2Fflutter-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckdevrel%2Fflutter-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ckdevrel","download_url":"https://codeload.github.com/ckdevrel/flutter-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944379,"owners_count":20858773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-android","flutter-apps","flutter-demo","flutter-design","flutter-examples","flutter-layouts","flutter-material","flutter-package","flutter-plugin","flutter-samples","flutter-ui","flutter-widget","flutterwave","layouts"],"created_at":"2024-08-01T12:02:36.316Z","updated_at":"2026-01-28T07:20:33.200Z","avatar_url":"https://github.com/ckdevrel.png","language":null,"readme":"\n\u003ca href='https://ko-fi.com/A302HW7' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://az743702.vo.msecnd.net/cdn/kofi4.png?v=f' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e \n\n\n[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-FlutterExamples-brightgreen.svg?style=plastic)](https://android-arsenal.com/details/3/7486)[![](https://img.shields.io/twitter/follow/espadrine.svg?label=Follow\u0026style=social)](https://twitter.com/takeoffandroid)[![](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/takeoffandroid)\n\n\u003ca href=\"https://imgur.com/VN2su2K\"\u003e\u003cimg src=\"https://i.imgur.com/VN2su2K.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n- [Layouts](#layouts)\n  - [Container](#container)\n  - [Row](#row)\n    - [MainAxisAlignment](#mainaxisalignment)\n    - [CrossAxisAlignment](#crossaxisalignment)\n  - [Column](#column)\n    - [MainAxisAlignment](#mainaxisalignment)\n    - [CrossAxisAlignment](#crossaxisalignment)\n  - [Center](#center) \n  - [Align](#align)\n  - [Padding](#padding)\n  - [SizedBox](#sizedbox)\n  - [Expanded](#expanded)\n  - [Flexible](#flexible)\n  - [ConstrainedBox](#constrainedbox)\n  - [Stack](#stack)\n  - [Wrap](#wrap)\n  - [Positioned](#positioned)\n  - [ListView](#listview)\n    - [Simple](#simple)\n    - [Divider](#divider)\n    - [Card](#card)\n  - [Text](#text)\n  - [Icon](#icon)\n\n- [Material](#material)    \n  - [Button](#button)\n    - [Material Button](#material-button)\n    - [Flat Button](#flat-button)\n    - [Raised Button](#raised-button)\n    - [Icon Button](#icon-button)\n    - [Floating Action Button](#floating-action-button)\n    - [DropdownButton](#dropdownbutton)\n    - [Radio Button](#radio-button)\n    \t- [Vertical](#vertical)   \n        - [Horizontal](#horizontal)   \n  - [Input Field](#input-field)\n  \t- [TextField](#textfield)\n    \t- [Under Line Style ](#under-line-style )   \n    \t- [Outer Line Style ](#outer-line-style ) \n    - [TextFormField](#textformfield)\n  - [Navigation Drawer](#navigation-drawer)\n  - [Sliver List](#sliver-list)\n\n\n - [Utilities](#utilities)\n  \n\n# Layouts\n\n## Container\n\u003ca href=\"https://imgur.com/pGA1yrB\"\u003e\u003cimg src=\"https://imgur.com/pGA1yrB.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e\n\n```dart\nContainer(\n  padding: const EdgeInsets.all(0.0),\n  color: Colors.cyanAccent,\n  width: 80.0,\n  height: 80.0,\n),\n```\n\n## Row\n\n### MainAxisAlignment\n\n\u003e **Note:** The below example is with **CrossAxisAlignment.center**\n\n|.center|.start|.end|\n|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/XR3dmJc\"\u003e\u003cimg src=\"https://imgur.com/XR3dmJc.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e |\u003ca href=\"https://imgur.com/bPfPpsp\"\u003e\u003cimg src=\"https://imgur.com/bPfPpsp.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/edkXXp7\"\u003e\u003cimg src=\"https://imgur.com/edkXXp7.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\n\n\n|.spaceEvenly|.spaceAround|.spaceBetween|\n|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/iX1G0F6\"\u003e\u003cimg src=\"https://imgur.com/iX1G0F6.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e |\u003ca href=\"https://imgur.com/FJJdzF8\"\u003e\u003cimg src=\"https://imgur.com/FJJdzF8.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/LzPcqi1\"\u003e\u003cimg src=\"https://imgur.com/LzPcqi1.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\n\n### CrossAxisAlignment\n\n|.center|.start|.end|.stretch|\n|:--:|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/XR3dmJc\"\u003e\u003cimg src=\"https://imgur.com/XR3dmJc.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e |\u003ca href=\"https://imgur.com/BP6U9HI\"\u003e\u003cimg src=\"https://imgur.com/BP6U9HI.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/CR2ZDSo\"\u003e\u003cimg src=\"https://imgur.com/CR2ZDSo.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/hS1Pu4G\"\u003e\u003cimg src=\"https://imgur.com/hS1Pu4G.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\n\n```dart\nRow(\n  mainAxisAlignment: MainAxisAlignment.center,\n  mainAxisSize: MainAxisSize.max,\n  crossAxisAlignment: CrossAxisAlignment.center,\n  children: \u003cWidget\u003e[\n  Container(\n    padding: const EdgeInsets.all(0.0),\n    color: Colors.cyanAccent,\n    width: 80.0,\n    height: 80.0,\n  ),\n  Container(\n    padding: const EdgeInsets.all(0.0),\n    color: Colors.blueAccent,\n    width: 80.0,\n    height: 80.0,\n  ),\n  Container(\n    padding: const EdgeInsets.all(0.0),\n    color: Colors.orangeAccent,\n    width: 80.0,\n    height: 80.0,\n  ),\n  ],\n),\n ```     \n\n## Column\n\n### MainAxisAlignment\n\n\u003e **Note:** The below example is with **CrossAxisAlignment.center**\n\n|.center|.start|.end|.spaceEvenly|.spaceAround|.spaceBetween|\n|:--:|:--:|:--:|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/AT1WBOy\"\u003e\u003cimg src=\"https://imgur.com/AT1WBOy.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e |\u003ca href=\"https://imgur.com/Df3PZ0E\"\u003e\u003cimg src=\"https://imgur.com/Df3PZ0E.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/05M0SFS\"\u003e\u003cimg src=\"https://imgur.com/05M0SFS.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/5FxzrUt\"\u003e\u003cimg src=\"https://imgur.com/5FxzrUt.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e |\u003ca href=\"https://imgur.com/wB5u6vW\"\u003e\u003cimg src=\"https://imgur.com/wB5u6vW.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/XB6aNuj\"\u003e\u003cimg src=\"https://imgur.com/XB6aNuj.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e|\n\n### CrossAxisAlignment\n\n|.center|.start|.end|.stretch|\n|:--:|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/AT1WBOy\"\u003e\u003cimg src=\"https://imgur.com/AT1WBOy.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e |\u003ca href=\"https://imgur.com/HQt271d\"\u003e\u003cimg src=\"https://i.imgur.com/HQt271d.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/MQP5TwQ\"\u003e\u003cimg src=\"https://i.imgur.com/MQP5TwQ.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/9Fg9018\"\u003e\u003cimg src=\"https://i.imgur.com/9Fg9018.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n\n```dart\nColumn(\n  mainAxisAlignment: MainAxisAlignment.center,\n  mainAxisSize: MainAxisSize.max,\n  crossAxisAlignment: CrossAxisAlignment.center,\n  children: \u003cWidget\u003e[\n    Container(\n      padding: const EdgeInsets.all(0.0),\n      color: Colors.cyanAccent,\n      width: 80.0,\n      height: 80.0,\n    ),\n    Container(\n      padding: const EdgeInsets.all(0.0),\n      color: Colors.blueAccent,\n      width: 80.0,\n      height: 80.0,\n    ),\n    Container(\n      padding: const EdgeInsets.all(0.0),\n      color: Colors.orangeAccent,\n      width: 80.0,\n      height: 80.0,\n    ),\n  ],\n),\n ```     \n## Center\n\n\u003ca href=\"https://imgur.com/8vXWBcG\"\u003e\u003cimg src=\"https://i.imgur.com/8vXWBcG.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nCenter(child: Container(\n  padding: const EdgeInsets.all(0.0),\n  color: Colors.cyanAccent,\n  width: 80.0,\n  height: 80.0,\n))\n```\n\u003e **Note:** **Center** wraps any widget to center to its parent widget. (i.e orange is the parent widget)\n\n## Align\n\n|.topLeft|.topCenter|.topRight|\n|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/tUjxft5\"\u003e\u003cimg src=\"https://i.imgur.com/tUjxft5.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/CB5NLmh\"\u003e\u003cimg src=\"https://i.imgur.com/CB5NLmh.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/ObaBABi\"\u003e\u003cimg src=\"https://i.imgur.com/ObaBABi.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n|.centerLeft|.center|.centerRight|\n|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/Qt0dRjT\"\u003e\u003cimg src=\"https://i.imgur.com/Qt0dRjT.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/8vXWBcG\"\u003e\u003cimg src=\"https://i.imgur.com/8vXWBcG.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/IjDlZRl\"\u003e\u003cimg src=\"https://i.imgur.com/IjDlZRl.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n|.bottomLeft|.bottomCenter|.bottomRight|\n|:--:|:--:|:--:|\n|\u003ca href=\"https://imgur.com/UQhL7R4\"\u003e\u003cimg src=\"https://i.imgur.com/UQhL7R4.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/J27fCiH\"\u003e\u003cimg src=\"https://i.imgur.com/J27fCiH.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/3rqg16p\"\u003e\u003cimg src=\"https://i.imgur.com/3rqg16p.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n```dart\nAlign(\n  alignment: Alignment.center, \n  child: Container(\n  padding: const EdgeInsets.all(0.0),\n  color: Colors.cyanAccent,\n  width: 80.0,\n  height: 80.0,\n))\n```\n\n\u003e **Note:** **Align** wraps any widget based on the Alignment direction to its parent widget. The default alignment for **Align** is center.\n\n## Padding\n\n\u003ca href=\"https://imgur.com/vsLgkNA\"\u003e\u003cimg src=\"https://i.imgur.com/vsLgkNA.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nPadding(\n  padding: EdgeInsets.fromLTRB(24, 32, 24, 32) ,\n  child: Container(\n  padding: const EdgeInsets.all(0.0),\n  color: Colors.cyanAccent,\n  width: 80.0,\n  height: 80.0,\n))\n```\n\n## SizedBox\n\n\u003ca href=\"https://imgur.com/1dUkeuZ\"\u003e\u003cimg src=\"https://i.imgur.com/1dUkeuZ.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nSizedBox(\n  width: 200.0,\n  height: 100.0,\n  child: Card(\n    color: Colors.indigoAccent,\n    child: Center(\n        child: Text('SizedBox',\n            style: TextStyle(color: Colors.white)\n         )\n       )\n     )\n   )\n```\n\n\u003e **Note:** **SizedBox** constraints its child widget to match based on specific size of width and height.\n\n## Expanded\n\n|     Row     |            Column             |\n|----------------|-------------------------------|\n|\u003ca href=\"https://imgur.com/lQDfotj\"\u003e\u003cimg src=\"https://i.imgur.com/lQDfotj.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/z8FUGgu\"\u003e\u003cimg src=\"https://i.imgur.com/z8FUGgu.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n```dart\nRow(\n  mainAxisAlignment: MainAxisAlignment.center,\n  mainAxisSize: MainAxisSize.max,\n  crossAxisAlignment: CrossAxisAlignment.center,\n  children: \u003cWidget\u003e[\n    Expanded(\n      child: Container(color: Colors.cyan, height: 80),\n      flex: 2,\n    ),\n    Expanded(\n      child: Container(color: Colors.indigoAccent, height: 80),\n      flex: 3,\n    ),\n    Expanded(\n      child: Container(color: Colors.orange, height: 80),\n      flex: 4,\n    ),\n  ],\n),\n```\n\n## Flexible\n\n|     Row     |            Column             |\n|----------------|-------------------------------|\n|\u003ca href=\"https://imgur.com/5ZPdv5O\"\u003e\u003cimg src=\"https://i.imgur.com/5ZPdv5O.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/jhduYDT\"\u003e\u003cimg src=\"https://i.imgur.com/jhduYDT.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n```dart\nRow(\n  mainAxisAlignment: MainAxisAlignment.center,\n  mainAxisSize: MainAxisSize.max,\n  crossAxisAlignment: CrossAxisAlignment.center,\n  children: \u003cWidget\u003e[\n    Flexible(\n      child: Container(color: Colors.cyanAccent, height: 80, width: 80),\n      flex: 2,\n    ),\n    Flexible(\n    child: Container(color: Colors.indigoAccent, height: 80, width: 80),\n      flex: 3,\n    ),\n    Flexible(\n      child: Container(color: Colors.orange, height: 80, width: 80),\n      flex: 4,\n    ),\n  ],\n),\n```\n\n\u003e **Hint:** \n1. To make **Flexible** behave similar to Expanded, then add `fit: FlexFit.tight` \n2. By default fit type for **Flexible** is `fit: FlexFit.loose`.\n\n## ConstrainedBox\n\n|     Expand     |     Expand with Height     |     Tight     |      Loose     |\n|----------------|----------------------------|---------------|----------------|\n|\u003ca href=\"https://imgur.com/NVFRLJj\"\u003e\u003cimg src=\"https://i.imgur.com/NVFRLJj.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/EZav2GR\"\u003e\u003cimg src=\"https://i.imgur.com/EZav2GR.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/kRIXDqB\"\u003e\u003cimg src=\"https://i.imgur.com/kRIXDqB.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/CD2vkio\"\u003e\u003cimg src=\"https://i.imgur.com/CD2vkio.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n|`BoxConstraints.expand()`|`BoxConstraints.expand(height: 100)`|`BoxConstraints.tight(Size(125, 100))`|`BoxConstraints.loose(Size(125, 100))`|\n\n```dart\nConstrainedBox(\n  constraints: BoxConstraints.expand(height: 100),\n  child: Container(\n    color: Colors.orange,\n    child: Padding(padding: EdgeInsets.all(16), child: Text('Box Constraint', style: TextStyle(color: Colors.white),)),\n))\n```\n\n## Stack\n\n|AlignmentDirectional.centerStart|AlignmentDirectional.center|AlignmentDirectional.centerEnd|\n|--------------------------------|---------------------------|------------------------------|\n|\u003ca href=\"https://imgur.com/5WpzDWb\"\u003e\u003cimg src=\"https://i.imgur.com/5WpzDWb.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/Bb1bs22\"\u003e\u003cimg src=\"https://i.imgur.com/Bb1bs22.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/Dkuc0mn\"\u003e\u003cimg src=\"https://i.imgur.com/Dkuc0mn.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n|AlignmentDirectional.bottomStart|AlignmentDirectional.bottomCenter|AlignmentDirectional.bottomEnd|\n|--------------------------------|---------------------------|------------------------------|\n|\u003ca href=\"https://imgur.com/odCg42L\"\u003e\u003cimg src=\"https://i.imgur.com/odCg42L.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/bykS3Qf\"\u003e\u003cimg src=\"https://i.imgur.com/bykS3Qf.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/UgRiSq0\"\u003e\u003cimg src=\"https://i.imgur.com/UgRiSq0.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n|AlignmentDirectional.topStart|AlignmentDirectional.topCenter|AlignmentDirectional.topEnd|\n|-----------------------------|------------------------------|---------------------------|\n|\u003ca href=\"https://imgur.com/8nucWaD\"\u003e\u003cimg src=\"https://i.imgur.com/8nucWaD.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/EpvPFRr\"\u003e\u003cimg src=\"https://i.imgur.com/EpvPFRr.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/Kl8NjrN\"\u003e\u003cimg src=\"https://i.imgur.com/Kl8NjrN.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n```dart\nStack(\n  alignment: AlignmentDirectional.center,\n    children: [\n      Container(\n        height: 200.0,\n        width: 200.0,\n        color: Colors.red,\n      ),\n      Container(\n        height: 150.0,\n        width: 150.0,\n        color: Colors.blue,\n      ),\n      Container(\n        height: 100.0,\n        width: 100.0,\n        color: Colors.green,\n      ),\n      Container(\n        height: 50.0,\n        width: 50.0,\n        color: Colors.yellow,\n      ),\n    ],\n),\n```\n\u003e **Credits:** Fore more detailed blog post for this. Please visit https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6\n\n## Wrap\n\n\u003ca href=\"https://imgur.com/DnGAyK2\"\u003e\u003cimg src=\"https://i.imgur.com/DnGAyK2.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nWrap(\n  spacing: 4.0, // gap between lines\n  children: \u003cWidget\u003e[\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.orange, child: Text('C', style: TextStyle(color: Colors.white))),\n      label: Text('Cupcake'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.cyanAccent, child: Text('D', style: TextStyle(color: Colors.black45))),\n      label: Text('Donut'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.indigoAccent, child: Text('E', style: TextStyle(color: Colors.white))),\n      label: Text('Eclair'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.yellowAccent, child: Text('F', style: TextStyle(color: Colors.black45))),\n      label: Text('Froyo'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.green, child: Text('G', style: TextStyle(color: Colors.white))),\n      label: Text('Gingerbread'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.redAccent, child: Text('H', style: TextStyle(color: Colors.white))),\n      label: Text('Honeycomb'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.greenAccent, child: Text('I', style: TextStyle(color: Colors.black45))),\n      label: Text('Ice cream Sandwich'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.deepOrangeAccent, child: Text('J', style: TextStyle(color: Colors.white))),\n      label: Text('Jelly Bean'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.indigo, child: Text('K', style: TextStyle(color: Colors.white))),\n      label: Text('Kit Kat'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.tealAccent, child: Text('L', style: TextStyle(color: Colors.black45))),\n      label: Text('Lollipop'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.amberAccent, child: Text('M', style: TextStyle(color: Colors.white))),\n      label: Text('Marshmallow'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.cyan, child: Text('N', style: TextStyle(color: Colors.white))),\n      label: Text('Nougat'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.red, child: Text('O', style: TextStyle(color: Colors.white))),\n      label: Text('Oreo'),\n      backgroundColor: Colors.white,\n    ),\n    Chip(\n      avatar: CircleAvatar(backgroundColor: Colors.greenAccent, child: Text('P', style: TextStyle(color: Colors.black45))),\n      label: Text('Pie'),\n      backgroundColor: Colors.white,\n    ),\n  ],\n)\n```\n## Positioned\n\n\u003ca href=\"https://imgur.com/vizQUeG\"\u003e\u003cimg src=\"https://i.imgur.com/vizQUeG.jpg\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nConstrainedBox(\n  constraints: BoxConstraints.tight(Size(double.infinity, 256)),\n  child: Stack(\n    alignment: AlignmentDirectional.center,\n    children: \u003cWidget\u003e[\n      Positioned(\n        top: 0.0,\n        child: Icon(Icons.calendar_today,\n            size: 128.0, color: Colors.lightBlueAccent),\n      ),\n      Positioned(\n          top: 4,\n          right: 110,\n          child: CircleAvatar(radius: 16, backgroundColor: Colors.red)),\n    ],\n  ),\n)\n```  \n\n## ListView\n### Simple\n\n\u003ca href=\"https://imgur.com/90iV7zG\"\u003e\u003cimg src=\"https://i.imgur.com/90iV7zG.jpg\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    List\u003cString\u003e names = ['Alpha', 'Beta', 'Cupcake', 'Donut', 'Eclair',\n    'Froyo', 'Ginger bread', 'Honey comb', 'Ice cream sandwich', 'Jelly bean',\n    'Kitkat', 'Lollipop', 'Marshmallow', 'Nougat', 'Oreo', 'Pie'\n    ];\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: Scaffold(\n        appBar: AppBar(title: Text('ListView')),\n          body: Center(\n            child:\n               ListView.builder(\n                itemCount: names.length,\n                itemBuilder: (BuildContext context, int position) {\n                  var name = names[position];\n                  return ListTile(title: Text(name));\n                }),\n          )),\n    );\n  }\n```\n\n### Divider\n\n\u003ca href=\"https://imgur.com/qikJgCv\"\u003e\u003cimg src=\"https://i.imgur.com/qikJgCv.jpg\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nListView.separated(\n    itemBuilder: (BuildContext context, int position) {\n      var name = names[position];\n      return ListTile(title: Text(name));\n    },\n    separatorBuilder: (BuildContext context, int index) =\u003e\n        Divider(),\n    itemCount: names.length),\n```\n\n### Card\n\n\u003ca href=\"https://imgur.com/HO0D2Cx\"\u003e\u003cimg src=\"https://i.imgur.com/HO0D2Cx.jpg\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nListView.builder(\n  itemCount: names.length,\n  itemBuilder: (BuildContext context, int position) {\n    var name = names[position];\n    return Card(margin: EdgeInsets.fromLTRB(8, 4, 8, 4),child: ListTile(title: Text(name)));\n  })\n```\n\n## Text\n\u003ca href=\"https://imgur.com/yZPgBPy\"\u003e\u003cimg src=\"https://imgur.com/yZPgBPy.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e\n\n```dart\nText(\n  \"Flutter is Awesome\",\n  style: TextStyle(\n      fontSize: 18.0,\n      color: Colors.greenAccent,\n      fontWeight: FontWeight.w500,\n      fontFamily: \"Roboto\"),\n),\n```\n\n## Icon\n\u003ca href=\"https://imgur.com/QGPuoR5\"\u003e\u003cimg src=\"https://imgur.com/QGPuoR5.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e\n\n```dart\nnew Icon(Icons.flight_takeoff, color: Colors.blueAccent, size: 96.0),\n```\n\n# Material\n\n## Button\n\n### Material Button\n\n\u003ca href=\"https://imgur.com/dBP8Xzw\"\u003e\u003cimg src=\"https://i.imgur.com/dBP8Xzw.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nMaterialButton(\n  onPressed: () {\n    debugPrint('I am a material button');\n  },\n  shape: const StadiumBorder(),\n  textColor: Colors.black,\n  color: Colors.blue[300],\n  splashColor: Colors.blue[900],\n  disabledColor: Colors.grey,\n  disabledTextColor: Colors.white,\n  child: Text('Material Button'),\n),\n``` \n\n### Flat Button\n\n\u003ca href=\"https://imgur.com/x30XGUf\"\u003e\u003cimg src=\"https://i.imgur.com/x30XGUf.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nFlatButton(\n  onPressed: () {\n    debugPrint('I am Awesome');\n  },\n  textColor: Colors.white,\n  color: Colors.blueAccent,\n  disabledColor: Colors.grey,\n  disabledTextColor: Colors.white,\n  highlightColor: Colors.orangeAccent,\n  child: Text('Flat Button'),\n),\n```    \n\n### Raised Button\n\n\n\u003ca href=\"https://imgur.com/AtcNtCK\"\u003e\u003cimg src=\"https://imgur.com/AtcNtCK.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e\n\n```dart\nRaisedButton(\n  onPressed: () {\n    debugPrint('I am Awesome');\n  },\n  textColor: Colors.white,\n  color: Colors.blueAccent,\n  disabledColor: Colors.grey,\n  disabledTextColor: Colors.white,\n  highlightColor: Colors.orangeAccent,\n  elevation: 4.0,\n  child: Text('Raised Button'),\n),\n```  \n\n### Icon Button\n\n\u003ca href=\"https://imgur.com/Sj0JzHc\"\u003e\u003cimg src=\"https://imgur.com/Sj0JzHc.png\" title=\"source: imgur.com\"\u003e\u003c/a\u003e\n\n```dart\nIconButton(\n  onPressed: () {\n    debugPrint(\"Starred Me!\");\n  },\n  color: Colors.orangeAccent,\n  icon: Icon(Icons.star),\n  disabledColor: Colors.grey,\n  highlightColor: Colors.black38,\n),\n```   \n\n### Floating Action Button\n### (FAB)\n\n|     Normal     |            Mini             |\n|----------------|------------------------------|\n|\u003ca href=\"https://imgur.com/0cP3HMc\"\u003e\u003cimg src=\"https://i.imgur.com/0cP3HMc.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/R3YXDQq\"\u003e\u003cimg src=\"https://i.imgur.com/R3YXDQq.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n|   --------     |`mini: true`|\n \n\n```dart\nScaffold(\n  floatingActionButton: new FloatingActionButton(\n    mini: true,\n    child: new Icon(Icons.add),\n    onPressed: () {},\n  ),\n);\n```\n### DropdownButton\n\n|     DropdownButton     |     DropdownMenuItem     |\n|------------------------|--------------------------|\n|\u003ca href=\"https://imgur.com/6iLBoZo\"\u003e\u003cimg src=\"https://i.imgur.com/6iLBoZo.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/20akmMN\"\u003e\u003cimg src=\"https://i.imgur.com/20akmMN.jpg\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n```dart\nimport 'package:flutter/material.dart';\n\nclass CustomDropDownWidget extends StatefulWidget {\n  @override\n  ChangeBGColorDropdownState createState() {\n    return new ChangeBGColorDropdownState();\n  }\n}\n\nclass ChangeBGColorDropdownState extends State\u003cCustomDropDownWidget\u003e {\n  List\u003cDropDownItemModel\u003e _dropDownItemModelList = [\n    DropDownItemModel(versionName: \"Cupcake\"),\n    DropDownItemModel(versionName: \"Donut\"),\n    DropDownItemModel(versionName: \"Eclair\"),\n    DropDownItemModel(versionName: \"Froyo\"),\n  ];\n\n  DropDownItemModel _dropDownItemModel;\n\n  @override\n  void initState() {\n    super.initState();\n    _dropDownItemModel = _dropDownItemModelList[0];\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: Center(\n          child: Container(\n            padding: EdgeInsets.fromLTRB(16, 0, 16, 0),\n            color: Colors.orangeAccent,\n            child: DropdownButton\u003cDropDownItemModel\u003e(\n              underline: Container(\n                decoration: const BoxDecoration(\n                    border: Border(bottom: BorderSide(color: Colors.transparent))\n                ),\n              ),\n              iconEnabledColor: Colors.white,\n              items: _dropDownItemModelList\n                  .map((dropDownItemModel) =\u003e\n                      DropdownMenuItem\u003cDropDownItemModel\u003e(\n                        child: Text(dropDownItemModel.versionName),\n                        value: dropDownItemModel,\n                      ))\n                  .toList(),\n              onChanged: (DropDownItemModel dropDownItemModel) {\n                setState(() =\u003e _dropDownItemModel = dropDownItemModel);\n              },\n              hint: Text(\n                _dropDownItemModel.versionName,\n                style: TextStyle(color: Colors.white),\n              ),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n\nclass DropDownItemModel {\n  String versionName;\n\n  DropDownItemModel({this.versionName});\n}\n```\n### Radio Button\n\n#### Vertical\n\n\u003ca href=\"https://imgur.com/yIyZuth\"\u003e\u003cimg src=\"https://i.imgur.com/yIyZuth.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nimport 'package:flutter/material.dart';\n\nenum Gender { MALE, FEMALE, OTHER }\n\nclass RadioButton extends StatefulWidget {\n  @override\n  _RadioButtonState createState() =\u003e _RadioButtonState();\n}\n\nclass _RadioButtonState extends State\u003cRadioButton\u003e {\n  Gender _genderValue = Gender.MALE;\n\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          crossAxisAlignment: CrossAxisAlignment.center,\n          children: \u003cWidget\u003e[\n            RadioListTile(\n              title: const Text('Male'),\n              value: Gender.MALE,\n              groupValue: _genderValue,\n              onChanged: (Gender value) {\n                setState(() {\n                  _genderValue = value;\n                });\n              },\n            ),\n            RadioListTile(\n              title: const Text('Female'),\n                value: Gender.FEMALE,\n                groupValue: _genderValue,\n                onChanged: (Gender value) {\n                  setState(() {\n                    _genderValue = value;\n                  });\n                },\n            ),\n            RadioListTile(\n              title: const Text('Other'),\n              value: Gender.OTHER,\n              groupValue: _genderValue,\n              onChanged: (Gender value) {\n                setState(() {\n                  _genderValue = value;\n                });\n              },\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\n#### Horizontal\n\n\u003ca href=\"https://imgur.com/PAWvHrq\"\u003e\u003cimg src=\"https://i.imgur.com/PAWvHrq.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nimport 'package:flutter/material.dart';\n\nenum Gender { MALE, FEMALE, OTHER }\n\nclass RadioButtonHorizontal extends StatefulWidget {\n  @override\n  _RadioButtonHorizontalState createState() =\u003e _RadioButtonHorizontalState();\n}\n\nclass _RadioButtonHorizontalState extends State\u003cRadioButtonHorizontal\u003e {\n  Gender _genderValue = Gender.MALE;\n\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: Center(\n          child: Row(\n            mainAxisAlignment: MainAxisAlignment.center,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            children: \u003cWidget\u003e[\n              FlatButton.icon(\n                label: const Text('Male'),\n                icon: Radio(\n                  value: Gender.MALE,\n                  groupValue: _genderValue,\n                  onChanged: (Gender value) {\n                    setState(() {\n                      _genderValue = value;\n                    });\n                  },\n                ),\n                onPressed: () {\n                  setState(() {\n                    _genderValue = Gender.MALE;\n                  });\n                },\n              ),\n              FlatButton.icon(\n                label: const Text('Female'),\n                icon: Radio(\n                  value: Gender.FEMALE,\n                  groupValue: _genderValue,\n                  onChanged: (Gender value) {\n                    setState(() {\n                      _genderValue = value;\n                    });\n                  },\n                ),\n                onPressed: () {\n                  setState(() {\n                    _genderValue = Gender.FEMALE;\n                  });\n                },\n              ),\n              FlatButton.icon(\n                label: const Text('Others'),\n                icon: Radio(\n                  value: Gender.OTHER,\n                  groupValue: _genderValue,\n                  onChanged: (Gender value) {\n                    setState(() {\n                      _genderValue = value;\n                    });\n                  },\n                ),\n                onPressed: () {\n                  setState(() {\n                    _genderValue = Gender.OTHER;\n                  });\n                },\n              )\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}\n\n\n```\n\n## Navigation Drawer\n\n\u003ca href=\"https://imgur.com/yG6vIxa\"\u003e\u003cimg src=\"https://i.imgur.com/yG6vIxa.jpg\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\n   @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n          backgroundColor: AppColors.gradient_purple_begin,\n          title: Text(\"XSpends\")),\n      drawer: new Drawer(\n        child: new ListView(\n          children: \u003cWidget\u003e[\n            new UserAccountsDrawerHeader(\n              accountName: new Text(\"TakeoffAndroid\"),\n              accountEmail: new Text(\"takeoffandroid@gmail.com\"),\n              currentAccountPicture: CircleAvatar(\n                backgroundColor: Colors.yellow,\n                child: Text('T', style: TextStyle(color: Colors.black87))\n              ),\n              decoration: new BoxDecoration(\n                gradient: LinearGradient(\n                    begin: Alignment.centerLeft,\n                    end: Alignment.centerRight,\n                    colors: [\n                      AppColors.gradient_purple_begin,\n                      AppColors.gradient_purple_end\n                    ]),\n              ),\n            ),\n            new ListTile(\n                leading: Icon(Icons.home),\n                title: new Text(\"Home\"),\n                onTap: () {\n                  Navigator.pop(context);\n                }),\n            new ListTile(\n                leading: Icon(Icons.person),\n                title: new Text(\"Friends\"),\n                onTap: () {\n                  Navigator.pop(context);\n                }),\n            new ListTile(\n                leading: Icon(Icons.share),\n                title: new Text(\"Share\"),\n                onTap: () {\n                  Navigator.pop(context);\n                }),\n            new Divider(),\n            new ListTile(\n                leading: Icon(Icons.settings),\n                title: new Text(\"Settings\"),\n                onTap: () {\n                  Navigator.pop(context);\n                }),\n            new ListTile(\n                leading: Icon(Icons.power_settings_new),\n                title: new Text(\"Logout\"),\n                onTap: () {\n                  Navigator.pop(context);\n                }),\n          ],\n        ),\n      ),\n    );\n  }\n```\n\n## Input Field\n## TextField\n(Text box or Edit Text)\n\n### Under Line Style \n\n|     Simple     |     Icon       |\n|----------------|----------------|\n|\u003ca href=\"https://imgur.com/fmSnZ6D\"\u003e\u003cimg src=\"https://i.imgur.com/fmSnZ6D.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/2yixTp7\"\u003e\u003cimg src=\"https://i.imgur.com/2yixTp7.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n\n|     Prefix     |     Suffix     |\n|----------------|----------------|\n|\u003ca href=\"https://imgur.com/I3DDSx6\"\u003e\u003cimg src=\"https://i.imgur.com/I3DDSx6.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\u003ca href=\"https://imgur.com/jtveNIP\"\u003e\u003cimg src=\"https://i.imgur.com/jtveNIP.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e|\n\n```dart\nTextField(\n  decoration: InputDecoration(\n  hintText: \"Enter your name!\",\n  hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),\n  enabledBorder: new UnderlineInputBorder(\n      borderSide: new BorderSide(color: Colors.blue)),\n  focusedBorder: UnderlineInputBorder(\n    borderSide: BorderSide(color: Colors.orange),\n  ),\n  ),\n)\n```    \n\n|     Icon     |    Prefix     |     Suffix     |\n|--------------|---------------|----------------|\n|```InputDecoration(icon: Icon(Icons.account_circle, color: Colors.blue))```|```InputDecoration(prefixIcon: Icon(Icons.account_circle, color: Colors.blue))```|```InputDecoration(suffixIcon: Icon(Icons.account_circle, color: Colors.blue))```|\n\n### Outer Line Style \n\n\u003ca href=\"https://imgur.com/7J6MuH3\"\u003e\u003cimg src=\"https://i.imgur.com/7J6MuH3.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nTextField(\n  decoration: InputDecoration(\n  hintText: \"Enter your name!\",\n  hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),\n  enabledBorder: new OutlineInputBorder(\n      borderSide: new BorderSide(color: Colors.blue)),\n  focusedBorder: OutlineInputBorder(\n    borderSide: BorderSide(color: Colors.orange),\n  ),\n  ),\n)\n```\n\n\u003e **Note:** Icon, Prefix Icon and Suffix Icon are similar to Underline TextField\n\n## TextFormField\n\n\u003ca href=\"https://imgur.com/DCAnsns\"\u003e\u003cimg src=\"https://i.imgur.com/DCAnsns.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n```dart\nTextFormField(\n  style: TextStyle(color: Colors.white),\n    obscureText: true, // Use secure text for passwords.\n    decoration: InputDecoration(\n    enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white)),\n        focusedBorder: UnderlineInputBorder(\n          borderSide: BorderSide(color: Colors.yellow)\n    ),\n    hintText: 'Password',\n    hintStyle: TextStyle(color: Colors.white),\n    labelText: 'Type your password',\n    labelStyle: TextStyle(color: Colors.yellow))\n)\n```\n## Sliver List\n\n![slivers2](https://user-images.githubusercontent.com/46351318/85413440-74530900-b588-11ea-8616-059b15cf1a49.gif)\n\n\n* SliverList takes a delegate parameter which provides the items in the list as they scroll into view. \n\n* You can specify the actual list of children with a SliverChildListDelegate Or build them lazily with a SliverChildBuilderDelegate.\n\n```\nSliverList(\n    delegate: SliverChildListDelegate(\n      [\n        Container(color: Colors.red, height: 150.0),\n        Container(color: Colors.purple, height: 150.0),\n        Container(color: Colors.green, height: 150.0),\n      ],\n    ),\n);\n// This builds an infinite scrollable list of differently colored \n// Containers.\nSliverList(\n    delegate: SliverChildBuilderDelegate((BuildContext context, int index) {\n      // To convert this infinite list to a list with three items,\n      // uncomment the following line:\n      // if (index \u003e 3) return null;\n      return Container(color: getRandomColor(), height: 150.0);\n    },\n    // Or, uncomment the following line:\n    // childCount: 3,\n  ),\n);\n```\n\n\u003e **References:** \n1. https://medium.com/@anilcan/forms-in-flutter-6e1364eafdb5\n2. https://codingwithjoe.com/building-forms-with-flutter/\n\n## Utilities\n\nCreates Color Utils\n```dart\nclass AppColors {\n  static const Color colorPrimary = Color.fromARGB(255, 51, 51, 51);\n  static const Color colorPrimaryDark = Color.fromARGB(255, 41, 41, 41);\n  static const Color colorAccent = Color.fromARGB(255, 30, 198, 89);\n  static const Color yellow = Color.fromARGB(255, 252, 163, 38);\n  static const Color orange = Color.fromARGB(255, 252, 109, 38);\n  static const Color grey_unselected = Color.fromARGB(255, 96, 96, 96);\n  static const Color white_card = Color.fromARGB(255, 250, 250, 250);\n  static const Color chrome_grey = Color.fromARGB(255, 240, 240, 240);\n  static const Color white = Color.fromARGB(255, 255, 255, 255);\n  static const Color white_secondary = Color.fromARGB(255, 220, 220, 220);\n  static const Color white_un_selected = Color.fromARGB(255, 180, 180, 180);\n  static const Color indigo = Color.fromARGB(255, 51, 105, 231);\n  static const Color primary_text = Color.fromARGB(255, 51, 51, 51);\n  static const Color secondary_text = Color.fromARGB(255, 114, 114, 114);\n  static const Color grey = Color.fromARGB(255, 188, 187, 187);\n}\n```\n","funding_links":["https://ko-fi.com/A302HW7'"],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckdevrel%2Fflutter-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fckdevrel%2Fflutter-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckdevrel%2Fflutter-examples/lists"}