{"id":13552862,"url":"https://github.com/UsamaSarwar/fluttercapsule","last_synced_at":"2025-04-03T04:30:57.804Z","repository":{"id":46817951,"uuid":"272995724","full_name":"UsamaSarwar/fluttercapsule","owner":"UsamaSarwar","description":"Let's Flutter 💙","archived":false,"fork":false,"pushed_at":"2022-08-07T22:15:33.000Z","size":285,"stargazers_count":35,"open_issues_count":0,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-04T00:32:36.666Z","etag":null,"topics":["dart","flutter","flutter-cheatsheet","flutter-notes"],"latest_commit_sha":null,"homepage":"https://usama.dev/fluttercapsule","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UsamaSarwar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://developers.dukan.pk/product/detail/id/106913/","https://bykea.cash/usama"]}},"created_at":"2020-06-17T14:27:48.000Z","updated_at":"2024-05-20T07:00:21.000Z","dependencies_parsed_at":"2022-08-27T18:51:28.125Z","dependency_job_id":null,"html_url":"https://github.com/UsamaSarwar/fluttercapsule","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UsamaSarwar%2Ffluttercapsule","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UsamaSarwar%2Ffluttercapsule/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UsamaSarwar%2Ffluttercapsule/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UsamaSarwar%2Ffluttercapsule/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UsamaSarwar","download_url":"https://codeload.github.com/UsamaSarwar/fluttercapsule/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939141,"owners_count":20857916,"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":["dart","flutter","flutter-cheatsheet","flutter-notes"],"created_at":"2024-08-01T12:02:12.145Z","updated_at":"2025-04-03T04:30:57.563Z","avatar_url":"https://github.com/UsamaSarwar.png","language":"HTML","readme":"\n\n###### Q U I C K L I N K S\n[![fluttercapsule](https://img.shields.io/badge/Contribute-Now-211F1F?logo=GitHub\u0026logoColor=ffffff)](https://github.com/UsamaSarwar/fluttercapsule/blob/master/README.md) \n![Flutter](https://i.imgur.com/e9V2Zf7.jpg)\n[![HEALTH](https://img.shields.io/badge/FLUTTER-HEALTH_STATUS-64DD17)](#flutter-health-status) [![Usama Sarwar](https://img.shields.io/badge/FLUTTER-CREATE-304FFE)](#create-app) [![Usama Sarwar](https://img.shields.io/badge/FLUTTER-RUN-2962FF)](#run-app) [![Flutter Signing App](https://img.shields.io/badge/Signing_App-Google_Play-64DD17)](#signing-app) [![Flutter Packages](https://img.shields.io/badge/FLUTTER-PACKAGES-0091EA)](#Creating-a-plugin/dependency-in-Flutter)  [![Usama Sarwar](https://img.shields.io/badge/FLUTTER-BUILD-0091EA)](#build-app)\n##### SYSTEM SETTINGS\n[![Usama Sarwar](https://img.shields.io/badge/Status_Bar-Settings-DD2C00)](#status-bar) [![Usama Sarwar](https://img.shields.io/badge/Screen_Orientation-Settings-FF6D00)](#lock-orientation) \n##### WIDGETS\n[![Usama Sarwar](https://img.shields.io/badge/Loading-d50000)](#loading-indicator) [![Usama Sarwar](https://img.shields.io/badge/Dialog-263238)](#show-dialog-alert) [![Usama Sarwar](https://img.shields.io/badge/Form-AA00FF)](#form) [![Kishor Kc](https://img.shields.io/badge/Slider-64DD17)](#slider)\n##### BEGINNER LEVEL FLUTTER APPS\n[![Usama Sarwar](https://img.shields.io/badge/Well_Commented-Basic_App-AA00FF)](#basic-app) [![Usama Sarwar](https://img.shields.io/badge/Stateless_Widget-C51162)](#stateless-widget) [![Usama Sarwar](https://img.shields.io/badge/Stateful_Widget-d50000)](#stateful-widget) [![Usama Sarwar](https://img.shields.io/badge/App-Navigation-00C853)](#app-navigation) [![Usama Sarwar](https://img.shields.io/badge/ListView-Builder-C51162)](#listview-builder)\n[![Splash Screen](https://img.shields.io/badge/SplashScreen-AA00FF)](#splashscreen) \n[![Kishor Kc](https://img.shields.io/badge/Default_Flutter-Theme-FF6D00)](#default-flutter-theme)\n[![Kishor Kc](https://img.shields.io/badge/SignUp_Form-Validation-d50000)](#signup-form-validation)\n[![Kishor Kc](https://img.shields.io/badge/Implement_Search-C51162)](#implement-search)\n\n## Flutter Health Status\n_Run this command to check Flutter Status on your device_\n```bash\nflutter doctor\n```\n _Run this command to check available devices for Flutter_\n```bash\nflutter devices\n```\n _Run this command to upgrade Flutter_\n```bash\nflutter upgrade\n```\n _Run this command to configure Flutter_\n```bash\nflutter config\n```\n _Run this command to check Flutter Channel_\n```bash\nflutter channel\n```\n _Run this command to switch to Flutter Channel Beta, likewise you can switch back to_ `stable`\n```bash\nflutter channel beta\n```\n _Run this command to Repair Pub Cache_\n```bash\nflutter pub cache repair\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Create App\n_Run this command to create an app, just replace `app_name` with your desired app name but without spaces and special characters except_ `Underscore(_)`\n```bash\nflutter create app_name\n```\n#### Specify Package Name\n_Create your Flutter app with this command to customize your app's package name; Package name from the below command will be_ `com.company.app_name` _You can change it accordingly_ \n```bash\nflutter create --org com.company app_name\n```\n#### Create Command for Release\n```bash\nflutter create --androidx -t app --org com.company -a kotlin -i swift app_name\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Run App\n_Run this command to run a Flutter Project_\n```dart\nflutter run\n```\n_Run this command to check runner logs while running_\n```dart\nflutter run -v\n```\n_Run this command to run the project on specific device when there are muliple devices available replace_ `device_ID` _with your device ID_\n_Sample: `flutter run -d chrome` to run flutter web project on Chrome Browser_ \n```dart\nflutter run -d device_ID\n```\n_Run this command to run the flutter web project on specific port of localhost_\n_Sample: `flutter run -d chrome --web-hostname localhost --web-port 8080` to run flutter web project on port `localhost:8080` on Web Browser_ \n```dart\nflutter run -d chrome --web-hostname localhost --web-port [port_number]\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Signing App\n### Step 1\n**Create a keystore**\nIf you have an existing keystore, skip to the next step. If not, create one by running the following at the command line:\n```bash\n./keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key\n```\n**OR** _Run this if get error_\n```bash\n.\\keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key\n```\n**Note:** Keep this file private; do not check it into public source control. \n**Note:** keytool may not be in your path. It is part of the `Java JDK`, which is installed as part of Android Studio. For the concrete path, run `flutter doctor -v` and see the path printed after `Java binary at:` and then use that fully qualified path replacing java with keytool.\n\n### Step 2\nReference the keystore from the app Create a file named **key.properties**`\u003cProject\u003e/android/key.properties` that contains a reference to your keystore: \nAdd these lines in `/android/key.properties`\n```properties\nstorePassword= password from previous step\nkeyPassword= password from previous step\nkeyAlias= key\nstoreFile= location of the key store file, e.g. /Users/username/key.jks\n```\n### Step 3\n_Add these lines above android{ } (near line 16) in `/android/app/build.gradle`_\n```gradle\ndef keystorePropertiesFile = rootProject.file(\"key.properties\") \ndef keystoreProperties = new Properties() \nkeystoreProperties.load(new FileInputStream(keystorePropertiesFile)) \n```\n_Add these lines in android{ }  in `/android/app/build.gradle`_\n```\nsigningConfigs { \n\trelease { \n\tkeyAlias keystoreProperties['keyAlias']\n\tkeyPassword keystoreProperties['keyPassword']\n\tstoreFile file(keystoreProperties['storeFile'])\n\tstorePassword keystoreProperties['storePassword'] \n\t} \n} \nbuildTypes { \n\trelease { \n\tsigningConfig signingConfigs.release \n\t} \n}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n\n## Creating a plugin/dependency in Flutter\n### Step 1\n_Create a package first, using the following command:_\n```\nflutter create --template-plugin --org --com.example --template= plugin --platform= android, ios, -a java -i objc plugin_name\n```\n_**Note:** you can use the any language you prefer for android and ios._\nTo add web support in your plugin use the following command:\n```\nflutter create --template=plugin --platform=web .\n```\n### Step 2\nAdd the plugin code in _```plugin_name.dart```_ and also arrange your _```pubspec.yaml```_ and add following fields:\n```\nname: name of your plugin project\ndescription: description of the plugin project\nversion: version of the package to be hosted on pub.dev\nauthor: name of the author\nhomepage: link of the package's homepage\ndocumentation: link of the plugin documentation\npublish_to: specify where to publish the plugin it should be a link, if you do not want to publish it then place none instead of a link\n\nenvironment:\n    sdk:\n       flutter:\n      \ndependencies:\n// list any dependencies used by the plugin\n\ndev_dependencies:\n// list any dev dependencies used by the plugin\n\n```\n### Step 3\n_Publishing the plugin package:_\n```\nflutter publish --dry-run # this command will help you verify that everything is as intended\nflutter pub publish # it will publish the plugin on pub.dev\n```\nNow, you have successfully published your plugin. You can check it by using the following link:\n```\nhttps://pub.dev/packages/YOUR_PACKAGE_NAME\n```\n\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n\n## Build App\n_Run this command to build Android .apk file_\n```dart\nflutter build apk\n```\n_Run this command to build Android .apk file in release mode_\n```dart\nflutter build apk --release\n```\n_Run this command to build Web root folder in release mode_\n```dart\nflutter build web --release\n```\n#### Generate App Bundles\n```dart\nflutter build appbundle --target-platform android-arm,android-arm64,android-x64\n```\n#### Split the APKs per ABI\n_Run this command to reduce the APK Size to the minimum_\n```dart\nflutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi\n```\n#### Flutter Build Web Release\n_When running and building apps for the web, you can choose between two different renderers. The --web-renderer command line option takes one of three values, auto, html, or canvaskit._\n\u003cbr\u003e\n**HTML renderer**\n\u003cbr\u003e\nUses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.\n```dart\nflutter build web --web-renderer html --release\n```\n**CanvasKit renderer**\n\u003cbr\u003e\nThis renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.\n```dart\nflutter build web --web-renderer canvaskit --release\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Basic App\n_This is a very basic beginner level app that is showing two List Tiles in its body. To run this code copy and paste it in_ `lib/main.dart`\n```dart\n// Importing Material Library\nimport 'package:flutter/material.dart';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid main() =\u003e runApp(\n      // Material App is the outer most Parent Widget that will wrap the child widgets\n      MaterialApp(\n        // To remove the Debug Tag from the App\n        debugShowCheckedModeBanner: false,\n        // Setting App Theme data\n        theme: ThemeData(\n          primarySwatch: Colors.red,),\n        // Title is the title of the app\n        title: 'Messenger',\n        // Home widget of Material App\n        home: Scaffold(\n          // App Bar of the App\n          appBar: AppBar(\n            // Title of the App Bar\n            title: Text('Inbox'),\n            // This is the leading icon on the App Bar\n            leading: Icon(Icons.menu_open),\n            // These are action icon(s) on the App Bar\n            actions: [\n              // padding for wraping with some space\n              Padding(\n                // padding: EdgeInsets.all(8.0), // Padding value set to 8.0 on all sides\n                padding: EdgeInsets.only(right: 15.0), // Padding value set to 15.0 on right side\n                child: Icon(Icons.create_sharp), // Added a favourite icon\n              ),\n            ],\n          ),\n          // This is the body of Scafold\n          body: Column(\n            // Alignment across main (Vertical) Axis\n            mainAxisAlignment: MainAxisAlignment.start,\n            // Alignment across cross (Horizontal) Axis\n            crossAxisAlignment: CrossAxisAlignment.stretch,\n            children: [\n              // For setting some space around Card\n              Padding(\n                padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),\n                // Creating Card\n                child: Card(\n                  elevation: 5.0,\n                  // Setting List Tile\n                  child: ListTile(\n                    // Setting Leading Icon\n                    leading: Icon(\n                      Icons.account_circle,\n                      // Setting Size of the Icon\n                      size: 40.0,\n                      // Setting Icon Color\n                      color: Colors.amber,\n                    ),\n                    // Setting Title of the List Tile\n                    title: Text('Usama Sarwar'),\n                    // Setting Sub-Title of the List Tile\n                    subtitle: Text('Happy Birthday to you 🎂'),\n                    // Setting Trailing Icon\n                    trailing: Icon(\n                      Icons.send,\n                      color: Colors.amberAccent),),),),\n              // For setting some space around Card\n              Padding(\n                padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),\n                // Creating Card\n                child: Card(\n                  elevation: 5.0,\n                  // Setting List Tile\n                  child: ListTile(\n                    // Setting Leading Icon\n                    leading: Icon(\n                      Icons.account_circle,\n                      // Setting Size of the Icon\n                      size: 40.0,\n                      // Setting Icon Color\n                      color: Colors.grey[700],\n                    ),\n                    // Setting Title of the List Tile\n                    title: Text('Ayesha Ali'),\n                    // Setting Sub-Title of the List Tile\n                    subtitle: Text('Let\\'s meet at 10\\'O Clock ⌚'),\n                    // Setting Trailing Icon\n                    trailing: Icon(\n                      Icons.send,\n                      color: Colors.grey[700],),),),),],),),),);\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n\n## Stateless Widget\nIn Stateless widget the state of app can't change. Here is an example of a counter app in which you can observe the chnaging value in the console but on UI it will not render. To render the value accourdingly you will have to use Stateful Widget that is the next example.\n```dart\n// Importing Material Library\nimport  'package:flutter/material.dart';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid  main() =\u003e runApp(MyApp());\n\nclass  MyApp  extends  StatelessWidget {\n\n// Initilized a variable\nstatic  int number = 1;\n\n// Function for performing task\nvoid  increment() {\nnumber++;\n}\n\n@override\nWidget  build(BuildContext context) {\nreturn  // Material App is the outer most Parent Widget that will wrap the child widgets\nMaterialApp(\n// To remove the Debug Tag from the App\ndebugShowCheckedModeBanner: false,\n\n// Setting App Theme data\ntheme: ThemeData(\nprimarySwatch: Colors.red,\n),\n\n// Title is the title of the app\ntitle: 'Stateless Widget',\n\n// Home widget of Material App\nhome: Scaffold(\n\n// App Bar of the App\nappBar: AppBar(\n\n// Title of the App Bar\ntitle: Text('Stateless Widget Example'),\n\n// These are action icon(s) on the App Bar\n),\n// Body of Scafold\nbody: Center(\n// Display a text in the center\n// This is how to display a text\nchild: Text(\n// Concatination of a String with some variable\n'Number: $number', // However this will not update\n// Styling text\nstyle: TextStyle(\n// Setting fontSize\nfontSize: 25.0,),),),\n\n// FloatingActionButton Added\nfloatingActionButton: FloatingActionButton(\n// Setting Icon\nchild: Icon(Icons.add),\n// Setting action on button when it is pressed\nonPressed: () {\n// Funtion for the incrementation\nincrement();\n\n// To check the value of number on console\nprint('Number: $number');\n},),),);}}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Stateful Widget\nIn Stateful Widget, the state of the app can be changed. It renders everytime whenver it detectects the change in the value of some variable. Here is the sample code.\n```dart\n// Importing Material Library\nimport  'package:flutter/material.dart';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid  main() =\u003e runApp(MyApp());\nclass  MyApp  extends  StatefulWidget {\n@override\n_MyAppState  createState() =\u003e _MyAppState();\n}\nclass  _MyAppState  extends  State\u003cMyApp\u003e {\n\n// Initilized a variable\nstatic  int number = 1;\n\n// Increment Function\nvoid  increment() {\n// Calling SetState will render the User Interface and update it accordingly\nsetState(() {\nnumber++;\n});}\n\n@override\nWidget  build(BuildContext context) {\nreturn  // Material App is the outer most Parent Widget that will wrap the child widgets\nMaterialApp(\n// To remove the Debug Tag from the App\ndebugShowCheckedModeBanner: false,\n\n// Setting App Theme data\ntheme: ThemeData(\nprimarySwatch: Colors.red,\n),\n\n// Title is the title of the app\ntitle: 'Stateful Widget',\n\n// Home widget of Material App\nhome: Scaffold(\n\n// App Bar of the App\nappBar: AppBar(\n\n// Title of the App Bar\ntitle: Text('Stateful Widget Example'),\n// These are action icon(s) on the App Bar\n),\n\n// Body of Scafold\nbody: Center(\n// Display a text in the center\n// This is how to display a text\nchild: Text(\n// Concatination of a String with some variable\n'Number: $number', // However this will not update\n// Styling text\nstyle: TextStyle(\n// Setting fontSize\nfontSize: 25.0,\n),),),\n// FloatingActionButton Added\nfloatingActionButton: FloatingActionButton(\n// Setting Icon\nchild: Icon(Icons.add),\n// Setting action on button when it is pressed\nonPressed: () {\n// Funtion for the incrementation\nincrement();\n\n// To check the value of number on console\nprint('Number: $number');},),),);}}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## App Navigation\nNavigator in Flutter application manages the routes and screen navigation. According to official docs: _The navigator manages a stack of Route objects and provides methods for managing the stack, like Navigator.push and Navigator.pop._\n```dart\nimport  'package:flutter/material.dart';\nvoid  main() =\u003e runApp(Home());\n\nclass  Home  extends  StatelessWidget {\n// Home Widget\n@override\nWidget  build(BuildContext context) {\nreturn  MaterialApp(\ndebugShowCheckedModeBanner: false,\ntitle: 'Routing Sample App',\n// Initial Route when App Starts\ninitialRoute: '/',\n// Named Routes for all widgets in App\nroutes: {\n// We can use any string instead of '\\'\n'/': (context) =\u003e HomeScreen(), // Main Screen Route\n'/S1': (context) =\u003e Screen1(), // This is child screen of Home Screen\n'/S1/S2': (context) =\u003e Screen2(), // This is child screen of Screen 1\n},);}}\n  \n// Home Screen Widget\nclass  HomeScreen  extends  StatelessWidget {\n@override\nWidget  build(BuildContext context) {\nreturn  Scaffold(\nappBar: AppBar(\ntitle: Text('Home Screen'),\n),\nbody: Center(\nchild: Column(\nmainAxisAlignment: MainAxisAlignment.center,\nchildren: [\nText('This is Home Screen'),\nElevatedButton(\nchild: Text('Screen 1'),\n// This will navigate to named route '/S1' that is Screen 1\nonPressed: () =\u003e Navigator.pushNamed(context, '/S1'),\n),],),),);}}\n// Screen 1 Widget\nclass  Screen1  extends  StatelessWidget {\n@override\nWidget  build(BuildContext context) {\nreturn  Scaffold(\nappBar: AppBar(\ntitle: Text('Screen 1'),\n),\nbody: Center(\nchild: Column(\nmainAxisAlignment: MainAxisAlignment.center,\nchildren: [\nText('This is Screen 1'),\nElevatedButton(\nchild: Text('Home Screen'),\n// This will navigate to the parent screen from where it reached here\nonPressed: () =\u003e Navigator.pop(context),\n),\nElevatedButton(\nchild: Text('Screen 2'),\n// This will navigate to named route '/S1/S2' that is Screen 2\nonPressed: () =\u003e Navigator.pushNamed(context, '/S1/S2'),\n),],),),);}}  \n\n// Screen 2 Widget\nclass  Screen2  extends  StatelessWidget {\n@override\nWidget  build(BuildContext context) {\nreturn  Scaffold(\nappBar: AppBar(\ntitle: Text('Screen 2'),\n),\nbody: Center(\nchild: Column(\nmainAxisAlignment: MainAxisAlignment.center,\nchildren: [\nText('This is Screen 2'),\nElevatedButton(\nchild: Text('Home Screen'),\n// This will navigate to named route '/' that is Home Screen\nonPressed: () =\u003e Navigator.pushNamed(context, '/'),\n),\nElevatedButton(\nchild: Text('Screen 1'),\n// This will navigate to the parent screen from where it reached here\nonPressed: () =\u003e Navigator.pop(context),\n),],),),);}}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## ListView Builder\n```dart\nimport  'package:flutter/material.dart';\nvoid  main() =\u003e runApp(Home());\n\n// List of items\nList\u003cString\u003e list = ['Item 0'];\n// Variable for incrementing value\nint  num = 1;\nclass  Home  extends  StatelessWidget {\n// Home Widget\n@override\nWidget  build(BuildContext context) {\nreturn  MaterialApp(\ndebugShowCheckedModeBanner: false,\ntitle: 'ListView Builder',\n// Initial Route when App Starts\ninitialRoute: '/',\n// Named Routes for all widgets in App\nroutes: {\n// We can use any string instead of '\\'\n'/': (context) =\u003e HomeScreen(), // Main Screen Route\n},);}}\n\nclass  HomeScreen  extends  StatefulWidget {\n@override\n_HomeScreenState  createState() =\u003e _HomeScreenState();\n}\n\nclass  _HomeScreenState  extends  State\u003cHomeScreen\u003e {\n// Function for adding value into the list\nvoid  addItem() {\nsetState(() {\nlist.add('Item ' + '${num.toString()}');\n});\nprint(list); // For console logs\nnum++;\n}\n\n// Function for deleting value from the list\nvoid  delItem(int index) {\nsetState(() {\nlist.removeAt(index);\n});\nprint(list); // For console logs\n}\n\n@override\nWidget  build(BuildContext context) {\nreturn  Scaffold(\nappBar: AppBar(\nbackgroundColor: Colors.red,\ntitle: Text('ListView Builder'),\nactions: [\n// Icon Button to add item into the list\nIconButton(\nicon: Icon(Icons.add),\nonPressed: () {\naddItem();\n},),],),\nbody: ListView.builder(\n// .length will automatically determine the size of list\nitemCount: list.length,\nitemBuilder: (context, index) {\nreturn  Padding(\npadding: EdgeInsets.fromLTRB(8.0, 5.0, 8.0, 0.0),\nchild: Card(\nelevation: 5.0,\nchild: ListTile(\n// To show Snackbar\nonTap: () {\nScaffoldMessenger.of(context).showSnackBar(\nSnackBar(content: Text('You tapped on ${list[index]}')));\n},\n// Smile, because it's good for health\nleading: Icon(\nIcons.insert_emoticon,\ncolor: Colors.amber,\nsize: 40,\n),\n// Icon Butoon to delete value at certain index\ntrailing: IconButton(\nicon: Icon(\nIcons.delete,\ncolor: Colors.red,\n),\nonPressed: () {\ndelItem(index);\n},),\n// Setting title to ListTile\ntitle: Text(\n'Title of ${list[index]}',\n),\n// Setting subtitle to ListTile\nsubtitle: Text('Subtitle of ${list[index]}'),\n),\n),\n);\n},\n),\n// Floating Action Button to add values into the list\nfloatingActionButton: FloatingActionButton(\nbackgroundColor: Colors.red,\nchild: Icon(Icons.add),\nonPressed: addItem,\n),);}}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Status Bar\n```dart\n// Import Services Package\nimport 'package:flutter/services.dart'; \n\nvoid main() {\n\t// Hide Status bar and Bottom Navigation Bar\n    SystemChrome.setEnabledSystemUIOverlays([]);\n}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Lock Orientation\n```dart\n// Import library\nimport 'package:flutter/services.dart';\n  // Add this into your main()\n  await SystemChrome.setPreferredOrientations([\n\t// Locks Device orientation to always potrait\n    DeviceOrientation.portraitUp,\n  ]);\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Loading Indicator\n```dart\nclass SomeWidget extends StatefulWidget {\n  @override\n  _SomeWidgetState createState() =\u003e _SomeWidgetState();\n}\n\nclass _SomeWidgetState extends State\u003cSomeWidget\u003e {\n  Future future;\n\n  @override\n  void initState() {\n    future = Future.delayed(Duration(seconds: 1));\n    super.initState();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return FutureBuilder(\n      future: future,\n      builder: (context, snapshot) {\n        return snapshot.connectionState == ConnectionState.done\n            ? Text('Loaded')\n            : CircularProgressIndicator();\n      },\n    );\n  }\n}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Show Dialog Alert\n```dart\n// ShowDialog Builtin Function\nshowDialog\u003cvoid\u003e(\n  context: context,\n  barrierDismissible: false,\n  builder: (BuildContext context) {\n    return AlertDialog(\n      title: Text('Alert Title'),\n      content: Text('My Alert Msg'),\n      actions: \u003cWidget\u003e[\n        TextButton(\n          child: Text('Ask me later'),\n          onPressed: () {\n            print('Ask me later pressed');\n            Navigator.of(context).pop();\n          },\n        ),\n        TextButton(\n          child: Text('Cancel'),\n          onPressed: () {\n            print('Cancel pressed');\n            Navigator.of(context).pop();\n          },\n        ),\n        TextButton(\n          child: Text('OK'),\n          onPressed: () {\n            print('OK pressed');\n            Navigator.of(context).pop();\n          },\n        ),\n      ],\n    );\n  },\n);\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Form\n_Import Get from [Pub](https://pub.dev/packages/get)_\n```yaml\ndependencies:\n  get:\n```\n_Generate GlobalKey for the `form validation`_\n```dart\nGlobalKey\u003cFormState\u003e key = GlobalKey\u003cFormState\u003e();\n```\n_Call this function where to show popup_\n```dart\n  Get.bottomSheet(\n    BottomSheet(\n      onClosing: () =\u003e Get.back(),\n      builder: (context) {\n        return Form(\n          key: key,\n          child: SingleChildScrollView(\n            child: Column(\n              mainAxisSize: MainAxisSize.min,\n              children: \u003cWidget\u003e[\n                Row(\n                  mainAxisAlignment: MainAxisAlignment.spaceBetween,\n                  children: [\n                    IconButton(\n                      icon: Icon(Icons.close),\n                      onPressed: () =\u003e Get.back(),\n                    ),\n                    Text(\n                      'Form Title here',\n                      style: GoogleFonts.pacifico(\n                        textStyle: TextStyle(fontSize: 22.0),\n                      ),\n                    ),\n                    IconButton(\n                      icon: Icon(Icons.check),\n                      onPressed: () {\n                        if (key.currentState.validate()) {\n                          // Get.to();\n                          key.currentState.save();\n                          Get.close(0);\n                          Get.snackbar(\n                              'Done', 'Data is submitted Successfully!',\n                              snackPosition: SnackPosition.BOTTOM);\n                        }\n                      },\n                    ),\n                  ],\n                ),\n                TextFormField(\n                  maxLength: 30,\n                  keyboardType: TextInputType.name,\n                  //  inputFormatters: [FilteringTextInputFormatter.digitsOnly],\n                  decoration: InputDecoration(\n                    prefixIcon: Icon(Icons.person_sharp),\n                    helperText: 'i.e Usama Sarwar',\n                    labelText: 'Full Name',\n                  ),\n                  validator: (_val) {\n                    if (_val.isEmpty) {\n                      return '*Required';\n                    } else {\n                      return null;\n                    }\n                  },\n                  onChanged: (_val) {\n                   // Save _val in some variable\n                  },\n                )\n              ],\n            ),\n          ),\n        );\n      },\n    ),\n    isScrollControlled: true,\n  );\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## SplashScreen\n```dart\n// Importing Material Library\nimport 'package:flutter/material.dart';\n\n// Importing for Timer\nimport 'dart:async';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid main() {\n  runApp(MyApp());\n}\n\n// MyApp Widget\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      title: 'Flutter Capsule',\n      // Initial Route when App Starts\n      initialRoute: '/splash',\n      // Named Routes for all widgets in App\n      routes: {\n        // We can use any string instead of '\\'\n        '/splash': (context) =\u003e SplashScreen(), // Main Screen Route\n        '/home': (context) =\u003e HomePage(), // This is child screen of HomePage\n      },\n    );\n  }\n}\n\n// SplashPage Widget\nclass SplashScreen extends StatefulWidget {\n  @override\n  _SplashScreenState createState() =\u003e _SplashScreenState();\n}\n\nclass _SplashScreenState extends State\u003cSplashScreen\u003e {\n  @override\n\n  // Inside the initState, I call the timer where 3 seconds of timer will navigate to the HomePage\n  void initState() {\n    Timer(\n        new Duration(\n          seconds: 3,\n        ),\n        nextpage);\n    super.initState();\n  }\n\n// this is a function where navigate to named route '/home' that is HomePage\n  void nextpage() {\n    // pushNamedAndRemoveUntil = Push the route with the given name onto the navigator, and then remove all the previous routes until the predicate returns true.\n    Navigator.pushNamedAndRemoveUntil(\n      context,\n      '/home',\n      (route) =\u003e false,\n    );\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    // ShapeArea will indent the child by enough to avoid the status bar at the top of the screen.\n    return SafeArea(\n      child: Scaffold(\n        // Set the Whole Screen background color\n        backgroundColor: Colors.black,\n        body: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            Row(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: [\n                Text(\n                  \"Flutter\",\n                  // Styling text\n                  style: TextStyle(\n                    color: Colors.white,\n                    fontWeight: FontWeight.w600,\n                    fontSize: Theme.of(context).textTheme.headline6.fontSize,\n                  ),\n                ),\n                Text(\n                  \"Capsule\",\n                  // Styling text\n                  style: TextStyle(\n                    color: Colors.pinkAccent,\n                    fontWeight: FontWeight.w600,\n                    fontSize: Theme.of(context).textTheme.headline6.fontSize,\n                  ),\n                ),\n              ],\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n\n// HomePage Widget\nclass HomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    // ShapeArea will indent the child by enough to avoid the status bar at the top of the screen.\n    return SafeArea(\n      child: Scaffold(\n        // App Bar of the App\n        appBar: AppBar(\n          // Set the appbar background color\n          backgroundColor: Colors.indigo,\n          // Title of the App Bar\n          title: Text(\n            \"Flutter Capsule\",\n          ),\n          // Set the appbar text in the center\n          centerTitle: true,\n          // Show the widget on Right side of our Mobile Screen\n          actions: [\n            // Icon Button to search\n            IconButton(\n              icon: Icon(Icons.search),\n              onPressed: () {},\n            ),\n          ],\n        ),\n        body: Center(\n          // Display a text in the center\n          // This is how to display a text\n          child: Text(\n            \"Welcome to Flutter Capsule\",\n            // Styling text\n            style: TextStyle(\n              fontWeight: FontWeight.w600,\n              fontSize: Theme.of(context).textTheme.headline6.fontSize,\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## SignUp Form Validation\n_This is signup form validation app that have FocusNode and as to validate the form.FocusNode is an object that can be used by a stateful widget to obtain the keyboard focus and to handle keyboard events.\nTo run this code copy and paste it in._ `lib/main.dart`\n```dart\n// Importing Material Library\nimport 'package:flutter/material.dart';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid main() {\nrunApp(MyApp());\n}\n\n// MyApp Widget\nclass MyApp extends StatelessWidget {\n@override\nWidget build(BuildContext context) {\nreturn MaterialApp(\ndebugShowCheckedModeBanner: false,\ntitle: 'Flutter Capsule',\n// Route when App Starts\nhome: SignupFormValidation(),\n);}}\n\n// Signup Form Validation Widget\nclass SignupFormValidation extends StatefulWidget {\n@override\n_SignupFormValidationState createState() =\u003e _SignupFormValidationState();\n}\n\nclass _SignupFormValidationState extends State\u003cSignupFormValidation\u003e {\n// TextEditingController - A controller for an editable text field.\nTextEditingController _name;\nTextEditingController _email;\nTextEditingController _pass;\n\n// FocusNode - An object that can be used by a stateful widget to obtain the keyboard focus and to handle keyboard events.\nFocusNode emailFocus = FocusNode();\nFocusNode passFocus = FocusNode();\n\n// GlobalKey\u003cFormState\u003e is key that is unique across the entire app.\nGlobalKey\u003cFormState\u003e _formkey = GlobalKey\u003cFormState\u003e();\n\nvar _obscureText = true;\n\n@override\nvoid initState() {\n// initState() - called when this object is inserted into the tree\n_name = TextEditingController();\n_email = TextEditingController();\n_pass = TextEditingController();\nsuper.initState();\n}\n\n@override\nvoid dispose() {\n// dispose() - when this object and its State is removed from the tree permanently and will never build again.\n_name.dispose();\n_email.dispose();\n_pass.dispose();\n\nemailFocus.dispose();\npassFocus.dispose();\nsuper.dispose();\n}\n\n@override\nWidget build(BuildContext context) {\n// ShapeArea will indent the child by enough to avoid the status bar at the top of the screen.\nreturn SafeArea(\nchild: Scaffold(\n// Set the Whole Screen background color\nbackgroundColor: Colors.black,\nappBar: AppBar(\nbackgroundColor: Colors.transparent,\nelevation: 0,\ntitle: Row(\n// Minimize the amount of free space along the main axis, subject to the incoming layout constraints.\nmainAxisSize: MainAxisSize.min,\nmainAxisAlignment: MainAxisAlignment.center,\nchildren: [\nText(\n\"Flutter\",\n// Styling text\nstyle: TextStyle(\ncolor: Colors.white,\nfontWeight: FontWeight.w600,\nfontSize: Theme.of(context).textTheme.headline6.fontSize,\n),),\nText(\n\"Capsule\",\n// Styling text\nstyle: TextStyle(\ncolor: Colors.pinkAccent,\nfontWeight: FontWeight.w600,\nfontSize: Theme.of(context).textTheme.headline6.fontSize,\n),),],),),\nbody: Padding(\npadding: EdgeInsets.symmetric(\nhorizontal: 16,\n),\n// Form is an optional container for grouping together multiple form field widgets (e.g. TextField widgets).\nchild: Form(\nkey: _formkey,\nchild: Column(\nmainAxisAlignment: MainAxisAlignment.center,\nchildren: [\n// call the formTextWidget as a Name Field\nformTextWidget(\nhintText: \"Name\",\nobscureText: false,\ncontroller: _name,\ntextInputAction: TextInputAction.next,\nonEditingComplete: () {\nFocusScope.of(context).requestFocus(emailFocus);\n},\nvalidator: (val) {\nif (val.isEmpty) return \"Field is Empty\";\nreturn null;\n},),\n// call the formTextWidget as a Email Field\nformTextWidget(\nhintText: \"Email\",\nobscureText: false,\ncontroller: _email,\nfocusNode: emailFocus,\ntextInputAction: TextInputAction.next,\nonEditingComplete: () {\nFocusScope.of(context).requestFocus(passFocus);\n},\nvalidator: (val) {\nif (val.isEmpty || !val.contains(\"@gmail.com\")) {\nreturn \"Field must be conatin @gmail.com\";\n}\nreturn null;\n},),\n// call the formTextWidget as a Password Field\nformTextWidget(\nhintText: \"Password\",\nobscureText: _obscureText,\ncontroller: _pass,\ntextInputAction: TextInputAction.done,\nsuffixIcon: InkWell(\nonTap: () {\n// setState will change our state and we can see the password visibility or not\nsetState(() {\n_obscureText = !_obscureText;\n});},\nchild: Icon(\n_obscureText ? Icons.visibility : Icons.visibility_off,\ncolor: _obscureText ? Colors.amber : Colors.white,\n),),\nvalidator: (val) {\nif (val.isEmpty || val.length \u003c 7)\nreturn \"Field have more than 7 digits\";\nreturn null;\n},),\n// SizedBox - A box with a specified size.\nSizedBox(\nheight: 25,\n),\n // MaterialButton - A utility class for building Material buttons that depend on the ambient ButtonTheme and Theme.\nMaterialButton(\nonPressed: () {\nString name = _name.text;\nString email = _email.text;\nString pass = _pass.text;\nprint(\"Name is $name \\nEmail is $email \\nPassword is $pass\",\n);\nvar a = _formkey.currentState.validate();\nprint(\"The a  is $a\");\n_formkey.currentState.save();\n_name.clear(); // Remove the element after insert the name\n_email.clear(); // Remove the element after insert the email\n_pass.clear(); // Remove the element after insert the password\n},\ncolor: Colors.red,\npadding: EdgeInsets.symmetric(\nvertical: 13,\nhorizontal: 20,\n),\nshape: RoundedRectangleBorder(\nborderRadius: BorderRadius.circular(17),\n),\nchild: Text(\"Create an Account\",\n),),],),),),),);}}\n// making the formTextWidget\n// contain the TextFormField\nWidget formTextWidget({\nTextEditingController controller,\nbool obscureText,\nString hintText,\nWidget suffixIcon,\nFocusNode focusNode,\nFunction() onEditingComplete,\nFunction(String) validator,\nTextInputAction textInputAction,\n}) {\nreturn TextFormField(\nobscureText: obscureText,\ncontroller: controller,\n// Styling form-text\nstyle: TextStyle(\ncolor: Colors.white,\n),\nvalidator: validator,\ndecoration: InputDecoration(\nhintText: hintText,\n// Styling Hint-text\nhintStyle: TextStyle(\ncolor: Colors.grey,\n),\nsuffixIcon: suffixIcon,\n// UnderlineInputBorder - Draws a horizontal line at the bottom of an InputDecorator's container and defines the container's shape.\n// The input decorator's \"container\" is the optionally filled area above the decorator's helper, error, and counter.\nfocusedBorder: UnderlineInputBorder(\nborderSide: BorderSide(color: Colors.white),\n),\nenabledBorder: UnderlineInputBorder(\nborderSide: BorderSide(color: Colors.white),\n),\nerrorBorder: UnderlineInputBorder(\nborderSide: BorderSide(color: Colors.white),\n),),\nfocusNode: focusNode,\ntextInputAction: textInputAction,\nonEditingComplete: onEditingComplete,\n);}\n\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Default Flutter Theme \n_Themes are just Theme widgets created at the root of an app by the MaterialApp. To share a Theme across an entire app, provide a ThemeData to the MaterialApp constructor.\nTo run this code copy and paste it in._ `lib/main.dart`\n```dart\n// Importing Material Library\nimport 'package:flutter/material.dart';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid main() {\nrunApp(MyApp());\n}\n\n// MyApp Widget\nclass MyApp extends StatelessWidget {\n\n@override\nWidget build(BuildContext context) {\nconst appName = 'Flutter Capsule';\nreturn MaterialApp(\ndebugShowCheckedModeBanner: false,\ntitle: appName,\ntheme: ThemeData(\n// Define the default colors.\nscaffoldBackgroundColor: Colors.indigo,\nappBarTheme:const AppBarTheme(\nbackgroundColor: Colors.red,),\n// Define the default TextTheme. Use this to specify the default\n// text styling for headlines, titles, bodies of text, and more.\ntextTheme: const TextTheme(\nheadline1: TextStyle(fontSize: 72.0,color:Colors.white, fontWeight: FontWeight.bold, fontFamily: 'Georgia',),\nheadline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic,fontFamily: 'Hind'),\n),\n),\nhome: const MyHomePage(\ntitle: appName,\n),\n);\n}}\n\n// MyHomePage Widget\nclass MyHomePage extends StatelessWidget {\nfinal String title;\nconst MyHomePage({Key? key, required this.title}) : super(key: key);\n@override\nWidget build(BuildContext context) {\nreturn Scaffold(\nappBar: AppBar(\ntitle: Text(title),\n),\nbody: Column(\ncrossAxisAlignment: CrossAxisAlignment.start,\nchildren: [\nText('Learn the Theme Data',\n// Styling text as the default TextTheme\nstyle: Theme.of(context).textTheme.headline6,),\nText('Applies a theme to descendant widgets.',\n// Styling text as the default TextTheme\nstyle: Theme.of(context).textTheme.headline1,\n),\n],\n),\n);\n}}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Implement Search\n_As we are doing here how to Implement Search Function in Flutter with the help of ListViewBuilder Widget. This is a basic example of working the search function._ `lib/main.dart`\n```dart\n// Importing Material Library\nimport 'package:flutter/material.dart';\n\n// Main Function of this App\n// We will call runApp that is a built-in function that will run the App\nvoid main() {\n  runApp(MyApp());\n}\n\n// MyApp Widget\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      theme: ThemeData(\n        primarySwatch: Colors.indigo,\n      ),\n      home: SearchPage(),\n    );\n  }\n}\n\n// SearchPage Widget\nclass SearchPage extends StatefulWidget {\n  @override\n  _SearchPageState createState() =\u003e _SearchPageState();\n}\n\nclass _SearchPageState extends State\u003cSearchPage\u003e {\n  // make the list of fruits\n  List\u003cString\u003e fruits = [\n    'apple',\n    'orange',\n    'banana',\n    'grapes',\n    'pineapple',\n    'mango',\n    'avocado',\n    'lychee',\n    'watermelon',\n    'kiwi',\n    'Guava',\n    'Pomegranates',\n    'papaya',\n    'lemon',\n  ];\n\n  // empty list of getFruits\n  List\u003cString\u003e getFruits = [];\n\n  // TextEditingController - A controller for an text field.\n  TextEditingController _controller = TextEditingController();\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text(\"Flutter Capsule\"),\n      ),\n      body: Column(\n        children: [\n          Padding(\n            padding: const EdgeInsets.all(16.0),\n            child: TextFormField(\n              controller: _controller,\n              decoration: InputDecoration(\n                hintText: 'Search here',\n                // Styling text as the default TextTheme\n                hintStyle: TextStyle(\n                  color: Colors.grey,\n                  fontSize: Theme.of(context).textTheme.subtitle1.fontSize,\n                ),\n              ),\n              onChanged: (value) {\n                setState(() {\n                  // call the list of fruits as a WHERE clause\n                  // and set the list of fruits into the empty list of getFruits\n                  getFruits = fruits\n                      .where((element) =\u003e element.contains(value.toLowerCase()))\n                      .toList();\n                });\n              },\n            ),\n          ),\n          const SizedBox(\n            height: 20,\n          ),\n          // checking the _controller and getFruits.length is equal to 0 or not\n          // if null or 0 then we get CircularProgressIndicator and if not null or 0 then we get the data\n          _controller.text.isNotEmpty \u0026\u0026 getFruits.length == 0\n              ? Center(\n                  child: CircularProgressIndicator(),\n                )\n              : Expanded(\n                  child: ListView.builder(\n                      // if _controller.text.isNotEmpty is a true then we get CircularProgressIndicator and if false, we get data\n                      itemCount: _controller.text.isNotEmpty\n                          ? getFruits.length\n                          : fruits.length,\n                      itemBuilder: (_, index) {\n                        return ListTile(\n                          // if _controller.text.isNotEmpty is a true then we get List of getFruits and if false we get List of fruits\n                          title: Text(_controller.text.isNotEmpty\n                              ? getFruits[index]\n                              : fruits[index]),\n                        );\n                      }),\n                )\n        ],\n      ),\n    );\n  }\n}\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n## Slider\n_Used to select from a range of values._\n```dart\nclass SliderWidget extends StatefulWidget {\n  @override\n  State\u003cSliderWidget\u003e createState() =\u003e _SliderWidgetState();\n}\n\nclass _SliderWidgetState extends State\u003cSliderWidget\u003e {\n  double value = 0.0;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text(\"Flutter Capsule\"),\n      ),\n      // Slider Widget\n      // Used to select from a range of values.\n      body: Slider(\n        // activeColor - The color to use for the portion of the slider track that is active.\n        activeColor: Colors.orangeAccent,\n        // min - The minimum value can be 0.0\n        min: 0.0,\n        // max - The maximum value can be 100.\n        max: 100.0,\n        // value - The currently selected value for this slider.\n        value: value,\n        // onChanged is called while the user is selecting a new value for the slider.\n        onChanged: (val) {\n          setState(() {\n            value = val;\n          });\n        },\n        // divisions - no of parts can be divided\n        divisions: 4,\n        // A label to show above the slider when the slider is active.\n        label: \"$value\",\n      ),\n    );\n  }\n}\n\n```\n[![TOP](https://img.shields.io/badge/Goto-Top-000000)](#q-u-i-c-k-l-i-n-k-s)\n#### Follow Us\n[![Usama Sarwar](https://img.shields.io/badge/Developer-fluttercapsule-000000?logo=opsgenie\u0026logoColor=ffffff)](https://usamasarwar.github.io) [![Usama Sarwar](https://img.shields.io/badge/Github-211F1F?logo=GitHub\u0026logoColor=ffffff)](https://github.com/usamasarwar/) [![Usama Sarwar](https://img.shields.io/badge/Subscribe-FF0000?logo=Youtube\u0026logoColor=ffffff)](https://www.youtube.com/UsamaSarwar?sub_confirmation=1) [![Usama Sarwar](https://img.shields.io/badge/Connect-0077B5?logo=Linkedin\u0026logoColor=ffffff)](https://www.linkedin.com/in/UsamaSarwarOfficial/)  [![Usama Sarwar](https://img.shields.io/badge/Follow-1877F2?logo=Facebook\u0026logoColor=ffffff)](https://www.facebook.com/UsamaSarwarOfficial/)  [![Usama Sarwar](https://img.shields.io/badge/Follow-08A0E9?logo=Twitter\u0026logoColor=ffffff)](https://www.twitter.com/UsamaSarwarPro/)  [![Usama Sarwar](https://img.shields.io/badge/Follow-DD2A7B?logo=Instagram\u0026logoColor=ffffff)](https://www.instagram.com/UsamaSarwarOfficial/) [![Usama Sarwar](https://img.shields.io/badge/Gmail-D44638?logo=gmail\u0026logoColor=ffffff)](mailto:UsamaSarwarOfficial@gmail.com) [![Usama Sarwar](https://img.shields.io/badge/Chat-1877F2?logo=Messenger\u0026logoColor=ffffff)](https://m.me/UsamaSarwarOfficial/) [![Usama Sarwar](https://img.shields.io/badge/Chat-25D366?logo=WhatsApp\u0026logoColor=ffffff)](https://wa.me/923100007773?text=%23Github) [![Usama Sarwar](https://img.shields.io/badge/Buy_me_Coffee-784fff?logo=buy-me-a-coffee\u0026logoColor=ffffff)](https://wa.me/923100007773?text=Thank%20you%20for%20supporting%20me%20%E2%9D%A4%0ABank%20Account%20Details%0ATitle%3A%20USAMA%20SARWAR%0AIBAN%3A%20PK90HABB0022417901576303)\n","funding_links":["https://developers.dukan.pk/product/detail/id/106913/","https://bykea.cash/usama"],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUsamaSarwar%2Ffluttercapsule","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FUsamaSarwar%2Ffluttercapsule","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUsamaSarwar%2Ffluttercapsule/lists"}