fluttercapsule

Q U I C K L I N K S

Flutter

SYSTEM SETTINGS

WIDGETS

BEGINNER LEVEL FLUTTER APPS

Flutter Health Status

Run this command to check Flutter Status on your device

flutter doctor

Run this command to check available devices for Flutter

flutter devices

Run this command to upgrade Flutter

flutter upgrade

Run this command to configure Flutter

flutter config

Run this command to check Flutter Channel

flutter channel

Run this command to switch to Flutter Channel Beta, likewise you can switch back to stable

flutter channel beta

Run this command to Repair Pub Cache

flutter pub cache repair

Create App

Run this command to create an app, just replace app_name with your desired app name but without spaces and special characters except Underscore(_)

flutter create app_name

Specify Package Name

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

flutter create --org com.company app_name

Create Command for Release

flutter create --androidx -t app --org com.company -a kotlin -i swift app_name

Run App

Run this command to run a Flutter Project

flutter run

Run this command to check runner logs while running

flutter run -v

Run this command to run the project on specific device when there are muliple devices available replace device_ID with your device ID Sample: flutter run -d chrome to run flutter web project on Chrome Browser

flutter run -d device_ID

Run this command to run the flutter web project on specific port of localhost Sample: flutter run -d chrome --web-hostname localhost --web-port 8080 to run flutter web project on port localhost:8080 on Web Browser

flutter run -d chrome --web-hostname localhost --web-port [port_number]

Signing App

Step 1

Create a keystore If you have an existing keystore, skip to the next step. If not, create one by running the following at the command line:

./keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

OR Run this if get error

.\keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

Note: Keep this file private; do not check it into public source control. 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.

Step 2

Reference the keystore from the app Create a file named key.properties<Project>/android/key.properties that contains a reference to your keystore: Add these lines in /android/key.properties

storePassword= password from previous step
keyPassword= password from previous step
keyAlias= key
storeFile= location of the key store file, e.g. /Users/username/key.jks

Step 3

Add these lines above android{ } (near line 16) in /android/app/build.gradle

def keystorePropertiesFile = rootProject.file("key.properties") 
def keystoreProperties = new Properties() 
keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) 

Add these lines in android{ } in /android/app/build.gradle

signingConfigs { 
	release { 
	keyAlias keystoreProperties['keyAlias']
	keyPassword keystoreProperties['keyPassword']
	storeFile file(keystoreProperties['storeFile'])
	storePassword keystoreProperties['storePassword'] 
	} 
} 
buildTypes { 
	release { 
	signingConfig signingConfigs.release 
	} 
}

Creating a plugin/dependency in Flutter

Step 1

Create a package first, using the following command:

flutter create --template-plugin --org --com.example --template= plugin --platform= android, ios, -a java -i objc plugin_name

Note: you can use the any language you prefer for android and ios. To add web support in your plugin use the following command:

flutter create --template=plugin --platform=web .

Step 2

Add the plugin code in plugin_name.dart and also arrange your pubspec.yaml and add following fields:

name: name of your plugin project
description: description of the plugin project
version: version of the package to be hosted on pub.dev
author: name of the author
homepage: link of the package's homepage
documentation: link of the plugin documentation
publish_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

environment:
    sdk:
       flutter:
      
dependencies:
// list any dependencies used by the plugin

dev_dependencies:
// list any dev dependencies used by the plugin

Step 3

Publishing the plugin package:

flutter publish --dry-run # this command will help you verify that everything is as intended
flutter pub publish # it will publish the plugin on pub.dev

Now, you have successfully published your plugin. You can check it by using the following link:

https://pub.dev/packages/YOUR_PACKAGE_NAME

Build App

Run this command to build Android .apk file

flutter build apk

Run this command to build Android .apk file in release mode

flutter build apk --release

Run this command to build Web root folder in release mode

flutter build web --release

Generate App Bundles

flutter build appbundle --target-platform android-arm,android-arm64,android-x64

Split the APKs per ABI

Run this command to reduce the APK Size to the minimum

flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi

Flutter Build Web Release

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.
HTML renderer
Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.

flutter build web --web-renderer html --release

CanvasKit renderer
This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.

flutter build web --web-renderer canvaskit --release

Basic App

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

// Importing Material Library
import 'package:flutter/material.dart';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void main() => runApp(
      // Material App is the outer most Parent Widget that will wrap the child widgets
      MaterialApp(
        // To remove the Debug Tag from the App
        debugShowCheckedModeBanner: false,
        // Setting App Theme data
        theme: ThemeData(
          primarySwatch: Colors.red,),
        // Title is the title of the app
        title: 'Messenger',
        // Home widget of Material App
        home: Scaffold(
          // App Bar of the App
          appBar: AppBar(
            // Title of the App Bar
            title: Text('Inbox'),
            // This is the leading icon on the App Bar
            leading: Icon(Icons.menu_open),
            // These are action icon(s) on the App Bar
            actions: [
              // padding for wraping with some space
              Padding(
                // padding: EdgeInsets.all(8.0), // Padding value set to 8.0 on all sides
                padding: EdgeInsets.only(right: 15.0), // Padding value set to 15.0 on right side
                child: Icon(Icons.create_sharp), // Added a favourite icon
              ),
            ],
          ),
          // This is the body of Scafold
          body: Column(
            // Alignment across main (Vertical) Axis
            mainAxisAlignment: MainAxisAlignment.start,
            // Alignment across cross (Horizontal) Axis
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // For setting some space around Card
              Padding(
                padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
                // Creating Card
                child: Card(
                  elevation: 5.0,
                  // Setting List Tile
                  child: ListTile(
                    // Setting Leading Icon
                    leading: Icon(
                      Icons.account_circle,
                      // Setting Size of the Icon
                      size: 40.0,
                      // Setting Icon Color
                      color: Colors.amber,
                    ),
                    // Setting Title of the List Tile
                    title: Text('Usama Sarwar'),
                    // Setting Sub-Title of the List Tile
                    subtitle: Text('Happy Birthday to you 🎂'),
                    // Setting Trailing Icon
                    trailing: Icon(
                      Icons.send,
                      color: Colors.amberAccent),),),),
              // For setting some space around Card
              Padding(
                padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
                // Creating Card
                child: Card(
                  elevation: 5.0,
                  // Setting List Tile
                  child: ListTile(
                    // Setting Leading Icon
                    leading: Icon(
                      Icons.account_circle,
                      // Setting Size of the Icon
                      size: 40.0,
                      // Setting Icon Color
                      color: Colors.grey[700],
                    ),
                    // Setting Title of the List Tile
                    title: Text('Ayesha Ali'),
                    // Setting Sub-Title of the List Tile
                    subtitle: Text('Let\'s meet at 10\'O Clock ⌚'),
                    // Setting Trailing Icon
                    trailing: Icon(
                      Icons.send,
                      color: Colors.grey[700],),),),),],),),),);

In 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.

// Importing Material Library
import  'package:flutter/material.dart';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void  main() => runApp(MyApp());

class  MyApp  extends  StatelessWidget {

// Initilized a variable
static  int number = 1;

// Function for performing task
void  increment() {
number++;
}

@override
Widget  build(BuildContext context) {
return  // Material App is the outer most Parent Widget that will wrap the child widgets
MaterialApp(
// To remove the Debug Tag from the App
debugShowCheckedModeBanner: false,

// Setting App Theme data
theme: ThemeData(
primarySwatch: Colors.red,
),

// Title is the title of the app
title: 'Stateless Widget',

// Home widget of Material App
home: Scaffold(

// App Bar of the App
appBar: AppBar(

// Title of the App Bar
title: Text('Stateless Widget Example'),

// These are action icon(s) on the App Bar
),
// Body of Scafold
body: Center(
// Display a text in the center
// This is how to display a text
child: Text(
// Concatination of a String with some variable
'Number: $number', // However this will not update
// Styling text
style: TextStyle(
// Setting fontSize
fontSize: 25.0,),),),

// FloatingActionButton Added
floatingActionButton: FloatingActionButton(
// Setting Icon
child: Icon(Icons.add),
// Setting action on button when it is pressed
onPressed: () {
// Funtion for the incrementation
increment();

// To check the value of number on console
print('Number: $number');
},),),);}}

In 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.

// Importing Material Library
import  'package:flutter/material.dart';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void  main() => runApp(MyApp());
class  MyApp  extends  StatefulWidget {
@override
_MyAppState  createState() => _MyAppState();
}
class  _MyAppState  extends  State<MyApp> {

// Initilized a variable
static  int number = 1;

// Increment Function
void  increment() {
// Calling SetState will render the User Interface and update it accordingly
setState(() {
number++;
});}

@override
Widget  build(BuildContext context) {
return  // Material App is the outer most Parent Widget that will wrap the child widgets
MaterialApp(
// To remove the Debug Tag from the App
debugShowCheckedModeBanner: false,

// Setting App Theme data
theme: ThemeData(
primarySwatch: Colors.red,
),

// Title is the title of the app
title: 'Stateful Widget',

// Home widget of Material App
home: Scaffold(

// App Bar of the App
appBar: AppBar(

// Title of the App Bar
title: Text('Stateful Widget Example'),
// These are action icon(s) on the App Bar
),

// Body of Scafold
body: Center(
// Display a text in the center
// This is how to display a text
child: Text(
// Concatination of a String with some variable
'Number: $number', // However this will not update
// Styling text
style: TextStyle(
// Setting fontSize
fontSize: 25.0,
),),),
// FloatingActionButton Added
floatingActionButton: FloatingActionButton(
// Setting Icon
child: Icon(Icons.add),
// Setting action on button when it is pressed
onPressed: () {
// Funtion for the incrementation
increment();

// To check the value of number on console
print('Number: $number');},),),);}}

Navigator 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.

import  'package:flutter/material.dart';
void  main() => runApp(Home());

class  Home  extends  StatelessWidget {
// Home Widget
@override
Widget  build(BuildContext context) {
return  MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Routing Sample App',
// Initial Route when App Starts
initialRoute: '/',
// Named Routes for all widgets in App
routes: {
// We can use any string instead of '\'
'/': (context) => HomeScreen(), // Main Screen Route
'/S1': (context) => Screen1(), // This is child screen of Home Screen
'/S1/S2': (context) => Screen2(), // This is child screen of Screen 1
},);}}
  
// Home Screen Widget
class  HomeScreen  extends  StatelessWidget {
@override
Widget  build(BuildContext context) {
return  Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is Home Screen'),
ElevatedButton(
child: Text('Screen 1'),
// This will navigate to named route '/S1' that is Screen 1
onPressed: () => Navigator.pushNamed(context, '/S1'),
),],),),);}}
// Screen 1 Widget
class  Screen1  extends  StatelessWidget {
@override
Widget  build(BuildContext context) {
return  Scaffold(
appBar: AppBar(
title: Text('Screen 1'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is Screen 1'),
ElevatedButton(
child: Text('Home Screen'),
// This will navigate to the parent screen from where it reached here
onPressed: () => Navigator.pop(context),
),
ElevatedButton(
child: Text('Screen 2'),
// This will navigate to named route '/S1/S2' that is Screen 2
onPressed: () => Navigator.pushNamed(context, '/S1/S2'),
),],),),);}}  

// Screen 2 Widget
class  Screen2  extends  StatelessWidget {
@override
Widget  build(BuildContext context) {
return  Scaffold(
appBar: AppBar(
title: Text('Screen 2'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is Screen 2'),
ElevatedButton(
child: Text('Home Screen'),
// This will navigate to named route '/' that is Home Screen
onPressed: () => Navigator.pushNamed(context, '/'),
),
ElevatedButton(
child: Text('Screen 1'),
// This will navigate to the parent screen from where it reached here
onPressed: () => Navigator.pop(context),
),],),),);}}

ListView Builder

import  'package:flutter/material.dart';
void  main() => runApp(Home());

// List of items
List<String> list = ['Item 0'];
// Variable for incrementing value
int  num = 1;
class  Home  extends  StatelessWidget {
// Home Widget
@override
Widget  build(BuildContext context) {
return  MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ListView Builder',
// Initial Route when App Starts
initialRoute: '/',
// Named Routes for all widgets in App
routes: {
// We can use any string instead of '\'
'/': (context) => HomeScreen(), // Main Screen Route
},);}}

class  HomeScreen  extends  StatefulWidget {
@override
_HomeScreenState  createState() => _HomeScreenState();
}

class  _HomeScreenState  extends  State<HomeScreen> {
// Function for adding value into the list
void  addItem() {
setState(() {
list.add('Item ' + '${num.toString()}');
});
print(list); // For console logs
num++;
}

// Function for deleting value from the list
void  delItem(int index) {
setState(() {
list.removeAt(index);
});
print(list); // For console logs
}

@override
Widget  build(BuildContext context) {
return  Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text('ListView Builder'),
actions: [
// Icon Button to add item into the list
IconButton(
icon: Icon(Icons.add),
onPressed: () {
addItem();
},),],),
body: ListView.builder(
// .length will automatically determine the size of list
itemCount: list.length,
itemBuilder: (context, index) {
return  Padding(
padding: EdgeInsets.fromLTRB(8.0, 5.0, 8.0, 0.0),
child: Card(
elevation: 5.0,
child: ListTile(
// To show Snackbar
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('You tapped on ${list[index]}')));
},
// Smile, because it's good for health
leading: Icon(
Icons.insert_emoticon,
color: Colors.amber,
size: 40,
),
// Icon Butoon to delete value at certain index
trailing: IconButton(
icon: Icon(
Icons.delete,
color: Colors.red,
),
onPressed: () {
delItem(index);
},),
// Setting title to ListTile
title: Text(
'Title of ${list[index]}',
),
// Setting subtitle to ListTile
subtitle: Text('Subtitle of ${list[index]}'),
),
),
);
},
),
// Floating Action Button to add values into the list
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(Icons.add),
onPressed: addItem,
),);}}

Status Bar

// Import Services Package
import 'package:flutter/services.dart'; 

void main() {
	// Hide Status bar and Bottom Navigation Bar
    SystemChrome.setEnabledSystemUIOverlays([]);
}

Lock Orientation

// Import library
import 'package:flutter/services.dart';
  // Add this into your main()
  await SystemChrome.setPreferredOrientations([
	// Locks Device orientation to always potrait
    DeviceOrientation.portraitUp,
  ]);

Loading Indicator

class SomeWidget extends StatefulWidget {
  @override
  _SomeWidgetState createState() => _SomeWidgetState();
}

class _SomeWidgetState extends State<SomeWidget> {
  Future future;

  @override
  void initState() {
    future = Future.delayed(Duration(seconds: 1));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        return snapshot.connectionState == ConnectionState.done
            ? Text('Loaded')
            : CircularProgressIndicator();
      },
    );
  }
}

Show Dialog Alert

// ShowDialog Builtin Function
showDialog<void>(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Alert Title'),
      content: Text('My Alert Msg'),
      actions: <Widget>[
        TextButton(
          child: Text('Ask me later'),
          onPressed: () {
            print('Ask me later pressed');
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('Cancel'),
          onPressed: () {
            print('Cancel pressed');
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('OK'),
          onPressed: () {
            print('OK pressed');
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

Form

Import Get from Pub

dependencies:
  get:

Generate GlobalKey for the form validation

GlobalKey<FormState> key = GlobalKey<FormState>();

Call this function where to show popup

  Get.bottomSheet(
    BottomSheet(
      onClosing: () => Get.back(),
      builder: (context) {
        return Form(
          key: key,
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      icon: Icon(Icons.close),
                      onPressed: () => Get.back(),
                    ),
                    Text(
                      'Form Title here',
                      style: GoogleFonts.pacifico(
                        textStyle: TextStyle(fontSize: 22.0),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.check),
                      onPressed: () {
                        if (key.currentState.validate()) {
                          // Get.to();
                          key.currentState.save();
                          Get.close(0);
                          Get.snackbar(
                              'Done', 'Data is submitted Successfully!',
                              snackPosition: SnackPosition.BOTTOM);
                        }
                      },
                    ),
                  ],
                ),
                TextFormField(
                  maxLength: 30,
                  keyboardType: TextInputType.name,
                  //  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.person_sharp),
                    helperText: 'i.e Usama Sarwar',
                    labelText: 'Full Name',
                  ),
                  validator: (_val) {
                    if (_val.isEmpty) {
                      return '*Required';
                    } else {
                      return null;
                    }
                  },
                  onChanged: (_val) {
                   // Save _val in some variable
                  },
                )
              ],
            ),
          ),
        );
      },
    ),
    isScrollControlled: true,
  );

SplashScreen

// Importing Material Library
import 'package:flutter/material.dart';

// Importing for Timer
import 'dart:async';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void main() {
  runApp(MyApp());
}

// MyApp Widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Capsule',
      // Initial Route when App Starts
      initialRoute: '/splash',
      // Named Routes for all widgets in App
      routes: {
        // We can use any string instead of '\'
        '/splash': (context) => SplashScreen(), // Main Screen Route
        '/home': (context) => HomePage(), // This is child screen of HomePage
      },
    );
  }
}

// SplashPage Widget
class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override

  // Inside the initState, I call the timer where 3 seconds of timer will navigate to the HomePage
  void initState() {
    Timer(
        new Duration(
          seconds: 3,
        ),
        nextpage);
    super.initState();
  }

// this is a function where navigate to named route '/home' that is HomePage
  void nextpage() {
    // pushNamedAndRemoveUntil = Push the route with the given name onto the navigator, and then remove all the previous routes until the predicate returns true.
    Navigator.pushNamedAndRemoveUntil(
      context,
      '/home',
      (route) => false,
    );
  }

  @override
  Widget build(BuildContext context) {
    // ShapeArea will indent the child by enough to avoid the status bar at the top of the screen.
    return SafeArea(
      child: Scaffold(
        // Set the Whole Screen background color
        backgroundColor: Colors.black,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Flutter",
                  // Styling text
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    fontSize: Theme.of(context).textTheme.headline6.fontSize,
                  ),
                ),
                Text(
                  "Capsule",
                  // Styling text
                  style: TextStyle(
                    color: Colors.pinkAccent,
                    fontWeight: FontWeight.w600,
                    fontSize: Theme.of(context).textTheme.headline6.fontSize,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// HomePage Widget
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ShapeArea will indent the child by enough to avoid the status bar at the top of the screen.
    return SafeArea(
      child: Scaffold(
        // App Bar of the App
        appBar: AppBar(
          // Set the appbar background color
          backgroundColor: Colors.indigo,
          // Title of the App Bar
          title: Text(
            "Flutter Capsule",
          ),
          // Set the appbar text in the center
          centerTitle: true,
          // Show the widget on Right side of our Mobile Screen
          actions: [
            // Icon Button to search
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
        body: Center(
          // Display a text in the center
          // This is how to display a text
          child: Text(
            "Welcome to Flutter Capsule",
            // Styling text
            style: TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: Theme.of(context).textTheme.headline6.fontSize,
            ),
          ),
        ),
      ),
    );
  }
}

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. To run this code copy and paste it in. lib/main.dart

// Importing Material Library
import 'package:flutter/material.dart';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void main() {
runApp(MyApp());
}

// MyApp Widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Capsule',
// Route when App Starts
home: SignupFormValidation(),
);}}

// Signup Form Validation Widget
class SignupFormValidation extends StatefulWidget {
@override
_SignupFormValidationState createState() => _SignupFormValidationState();
}

class _SignupFormValidationState extends State<SignupFormValidation> {
// TextEditingController - A controller for an editable text field.
TextEditingController _name;
TextEditingController _email;
TextEditingController _pass;

// FocusNode - An object that can be used by a stateful widget to obtain the keyboard focus and to handle keyboard events.
FocusNode emailFocus = FocusNode();
FocusNode passFocus = FocusNode();

// GlobalKey<FormState> is key that is unique across the entire app.
GlobalKey<FormState> _formkey = GlobalKey<FormState>();

var _obscureText = true;

@override
void initState() {
// initState() - called when this object is inserted into the tree
_name = TextEditingController();
_email = TextEditingController();
_pass = TextEditingController();
super.initState();
}

@override
void dispose() {
// dispose() - when this object and its State is removed from the tree permanently and will never build again.
_name.dispose();
_email.dispose();
_pass.dispose();

emailFocus.dispose();
passFocus.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
// ShapeArea will indent the child by enough to avoid the status bar at the top of the screen.
return SafeArea(
child: Scaffold(
// Set the Whole Screen background color
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: Row(
// Minimize the amount of free space along the main axis, subject to the incoming layout constraints.
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Flutter",
// Styling text
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: Theme.of(context).textTheme.headline6.fontSize,
),),
Text(
"Capsule",
// Styling text
style: TextStyle(
color: Colors.pinkAccent,
fontWeight: FontWeight.w600,
fontSize: Theme.of(context).textTheme.headline6.fontSize,
),),],),),
body: Padding(
padding: EdgeInsets.symmetric(
horizontal: 16,
),
// Form is an optional container for grouping together multiple form field widgets (e.g. TextField widgets).
child: Form(
key: _formkey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// call the formTextWidget as a Name Field
formTextWidget(
hintText: "Name",
obscureText: false,
controller: _name,
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(emailFocus);
},
validator: (val) {
if (val.isEmpty) return "Field is Empty";
return null;
},),
// call the formTextWidget as a Email Field
formTextWidget(
hintText: "Email",
obscureText: false,
controller: _email,
focusNode: emailFocus,
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(passFocus);
},
validator: (val) {
if (val.isEmpty || !val.contains("@gmail.com")) {
return "Field must be conatin @gmail.com";
}
return null;
},),
// call the formTextWidget as a Password Field
formTextWidget(
hintText: "Password",
obscureText: _obscureText,
controller: _pass,
textInputAction: TextInputAction.done,
suffixIcon: InkWell(
onTap: () {
// setState will change our state and we can see the password visibility or not
setState(() {
_obscureText = !_obscureText;
});},
child: Icon(
_obscureText ? Icons.visibility : Icons.visibility_off,
color: _obscureText ? Colors.amber : Colors.white,
),),
validator: (val) {
if (val.isEmpty || val.length < 7)
return "Field have more than 7 digits";
return null;
},),
// SizedBox - A box with a specified size.
SizedBox(
height: 25,
),
 // MaterialButton - A utility class for building Material buttons that depend on the ambient ButtonTheme and Theme.
MaterialButton(
onPressed: () {
String name = _name.text;
String email = _email.text;
String pass = _pass.text;
print("Name is $name \nEmail is $email \nPassword is $pass",
);
var a = _formkey.currentState.validate();
print("The a  is $a");
_formkey.currentState.save();
_name.clear(); // Remove the element after insert the name
_email.clear(); // Remove the element after insert the email
_pass.clear(); // Remove the element after insert the password
},
color: Colors.red,
padding: EdgeInsets.symmetric(
vertical: 13,
horizontal: 20,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text("Create an Account",
),),],),),),),);}}
// making the formTextWidget
// contain the TextFormField
Widget formTextWidget({
TextEditingController controller,
bool obscureText,
String hintText,
Widget suffixIcon,
FocusNode focusNode,
Function() onEditingComplete,
Function(String) validator,
TextInputAction textInputAction,
}) {
return TextFormField(
obscureText: obscureText,
controller: controller,
// Styling form-text
style: TextStyle(
color: Colors.white,
),
validator: validator,
decoration: InputDecoration(
hintText: hintText,
// Styling Hint-text
hintStyle: TextStyle(
color: Colors.grey,
),
suffixIcon: suffixIcon,
// UnderlineInputBorder - Draws a horizontal line at the bottom of an InputDecorator's container and defines the container's shape.
// The input decorator's "container" is the optionally filled area above the decorator's helper, error, and counter.
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),),
focusNode: focusNode,
textInputAction: textInputAction,
onEditingComplete: onEditingComplete,
);}

Default Flutter Theme

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. To run this code copy and paste it in. lib/main.dart

// Importing Material Library
import 'package:flutter/material.dart';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void main() {
runApp(MyApp());
}

// MyApp Widget
class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
const appName = 'Flutter Capsule';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appName,
theme: ThemeData(
// Define the default colors.
scaffoldBackgroundColor: Colors.indigo,
appBarTheme:const AppBarTheme(
backgroundColor: Colors.red,),
// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: const TextTheme(
headline1: TextStyle(fontSize: 72.0,color:Colors.white, fontWeight: FontWeight.bold, fontFamily: 'Georgia',),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic,fontFamily: 'Hind'),
),
),
home: const MyHomePage(
title: appName,
),
);
}}

// MyHomePage Widget
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Learn the Theme Data',
// Styling text as the default TextTheme
style: Theme.of(context).textTheme.headline6,),
Text('Applies a theme to descendant widgets.',
// Styling text as the default TextTheme
style: Theme.of(context).textTheme.headline1,
),
],
),
);
}}

Implement Search

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

// Importing Material Library
import 'package:flutter/material.dart';

// Main Function of this App
// We will call runApp that is a built-in function that will run the App
void main() {
  runApp(MyApp());
}

// MyApp Widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: SearchPage(),
    );
  }
}

// SearchPage Widget
class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  // make the list of fruits
  List<String> fruits = [
    'apple',
    'orange',
    'banana',
    'grapes',
    'pineapple',
    'mango',
    'avocado',
    'lychee',
    'watermelon',
    'kiwi',
    'Guava',
    'Pomegranates',
    'papaya',
    'lemon',
  ];

  // empty list of getFruits
  List<String> getFruits = [];

  // TextEditingController - A controller for an text field.
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Capsule"),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: 'Search here',
                // Styling text as the default TextTheme
                hintStyle: TextStyle(
                  color: Colors.grey,
                  fontSize: Theme.of(context).textTheme.subtitle1.fontSize,
                ),
              ),
              onChanged: (value) {
                setState(() {
                  // call the list of fruits as a WHERE clause
                  // and set the list of fruits into the empty list of getFruits
                  getFruits = fruits
                      .where((element) => element.contains(value.toLowerCase()))
                      .toList();
                });
              },
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          // checking the _controller and getFruits.length is equal to 0 or not
          // if null or 0 then we get CircularProgressIndicator and if not null or 0 then we get the data
          _controller.text.isNotEmpty && getFruits.length == 0
              ? Center(
                  child: CircularProgressIndicator(),
                )
              : Expanded(
                  child: ListView.builder(
                      // if _controller.text.isNotEmpty is a true then we get CircularProgressIndicator and if false, we get data
                      itemCount: _controller.text.isNotEmpty
                          ? getFruits.length
                          : fruits.length,
                      itemBuilder: (_, index) {
                        return ListTile(
                          // if _controller.text.isNotEmpty is a true then we get List of getFruits and if false we get List of fruits
                          title: Text(_controller.text.isNotEmpty
                              ? getFruits[index]
                              : fruits[index]),
                        );
                      }),
                )
        ],
      ),
    );
  }
}

Slider

Used to select from a range of values.

class SliderWidget extends StatefulWidget {
  @override
  State<SliderWidget> createState() => _SliderWidgetState();
}

class _SliderWidgetState extends State<SliderWidget> {
  double value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Capsule"),
      ),
      // Slider Widget
      // Used to select from a range of values.
      body: Slider(
        // activeColor - The color to use for the portion of the slider track that is active.
        activeColor: Colors.orangeAccent,
        // min - The minimum value can be 0.0
        min: 0.0,
        // max - The maximum value can be 100.
        max: 100.0,
        // value - The currently selected value for this slider.
        value: value,
        // onChanged is called while the user is selecting a new value for the slider.
        onChanged: (val) {
          setState(() {
            value = val;
          });
        },
        // divisions - no of parts can be divided
        divisions: 4,
        // A label to show above the slider when the slider is active.
        label: "$value",
      ),
    );
  }
}

Q U I C K L I N K S

SYSTEM SETTINGS

WIDGETS

BEGINNER LEVEL FLUTTER APPS

Flutter Health Status

Create App

Specify Package Name

Create Command for Release

Run App

Signing App

Step 1

Step 2

Step 3

Creating a plugin/dependency in Flutter

Step 1

Step 2

Step 3

Build App

Generate App Bundles

Split the APKs per ABI

Flutter Build Web Release

Basic App

Stateless Widget

Stateful Widget

App Navigation

ListView Builder

Status Bar

Lock Orientation

Loading Indicator

Show Dialog Alert

Form

SplashScreen

Default Flutter Theme

Implement Search

Slider

Follow Us

Q U I C K L I N K S

SYSTEM SETTINGS

WIDGETS

BEGINNER LEVEL FLUTTER APPS

Flutter Health Status

Create App

Specify Package Name

Create Command for Release

Run App

Signing App

Step 1

Step 2

Step 3

Creating a plugin/dependency in Flutter

Step 1

Step 2

Step 3

Build App

Generate App Bundles

Split the APKs per ABI

Flutter Build Web Release

Basic App

Stateless Widget

Stateful Widget

App Navigation

ListView Builder

Status Bar

Lock Orientation

Loading Indicator

Show Dialog Alert

Form

SplashScreen

SignUp Form Validation

Default Flutter Theme

Implement Search

Slider

Follow Us