Let's Flutter 💙

Overview
Q U I C K L I N K S

fluttercapsule Flutter HEALTH Usama Sarwar Usama Sarwar Flutter Signing App Flutter Packages Usama Sarwar

SYSTEM SETTINGS

Usama Sarwar Usama Sarwar

WIDGETS

Usama Sarwar Usama Sarwar Usama Sarwar

BEGINNER LEVEL FLUTTER APPS

Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Splash Screen Kishor Kc Kishor Kc Kishor Kc

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

TOP

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

TOP

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]

TOP

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 
	} 
}

TOP

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

TOP

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

TOP

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

TOP

Stateless Widget

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');
},),),);}}

TOP

Stateful Widget

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');},),),);}}

TOP

App Navigation

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),
),],),),);}}

TOP

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,
),);}}

TOP

Status Bar

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

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

TOP

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

TOP

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();
      },
    );
  }
}

TOP

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();
          },
        ),
      ],
    );
  },
);

TOP

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,
  );

TOP

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,
            ),
          ),
        ),
      ),
    );
  }
}

TOP

SignUp Form Validation

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,
);}

TOP

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,
),
],
),
);
}}

TOP

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]),
                        );
                      }),
                )
        ],
      ),
    );
  }
}

TOP

Follow Us

Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar Usama Sarwar

You might also like...

Flutter RSS feed parsing - A demo application of flutter which parse RSS XML contents to the flutter application

Flutter RSS feed parsing - A demo application of flutter which parse RSS XML contents to the flutter application

Flutter RSS feed parsing demo This is demo application of flutter which shows ho

Nov 15, 2022

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter Mapbox GL Please note that this project is community driven and is not a

Jan 31, 2022

Code for Flutter Talk from Flutter Vikings 2022: Custom User Interactions in Flutter

Code for Flutter Talk from Flutter Vikings 2022: Custom User Interactions in Flutter

Custom User Interactions - Flutter Vikings 2022 A companion app for the Flutter Vikings 2022 talk - Custom User Interactions with Shortcuts, Intents,

Sep 16, 2022

Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Dec 6, 2022

Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Dec 15, 2022

Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Dec 26, 2022

Components that optimize Flutter fluency.(Flutter 流畅度优化的通用方案,轻松解决卡顿问题)

Components that optimize Flutter fluency.(Flutter 流畅度优化的通用方案,轻松解决卡顿问题)

Flutter fluency optimization component "Keframe" Page switching fluency improved: How to use Project depend on: Quick learning Constructor Description

Dec 30, 2022

Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Weekend With Flutter This is my new challenge. Every weekend, I want to implement challenging UI & digital designs using Flutter. you can join me with

Feb 24, 2022

Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Flutter Tutorial - User Profile & SharedPreferences Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's inf

Dec 3, 2022
Owner
Usama Sarwar
Senior Lead Flutter Developer 🛡
Usama Sarwar
Yukino lets you read manga or stream anime ad-free from multiple sources for free! Available for Windows, Linux, MacOS and Android.

Yukino Yukino lets you read manga or stream anime ad-free from multiple sources. The project's name "Yukino" meaning "Snow" named after the character

Yukino 204 Jan 6, 2023
A routing package that lets you navigate through guarded page stacks and URLs using the Router and Navigator's Pages API, aka "Navigator 2.0".

A Flutter package to help you handle your application routing and synchronize it with browser URL. Beamer uses the power of Router and implements all

Sandro Lovnički 485 Jan 7, 2023
An extension to the bloc state management library which lets you create State Machine using a declarative API

An extension to the bloc state management library which lets you create State Machine using a declarative API

null 25 Nov 28, 2022
At its core, Mah-Event lets end-users initiate and find events corresponding to their interests and location

Mah-Event Application At its core, Mah-Event lets end-users initiate and find events corresponding to their interests and location. It allows people t

Palm Jumnongrat 4 Oct 23, 2022
Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

Git+ for GitLab Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop. Git+ lets you see

Marek Gvora 38 Jan 7, 2023
Chance Dart is a free Open Source project that lets you create random strings, integers, and other things to help with tiresome tasks, especially when building automated tests or wherever else you require anything random.

Chance Dart Random generator helper for Dart Homepage • Documentation Overview Chance Dart is a free Open Source project that lets you create random s

Ayotomide 55 Dec 27, 2022
🆙🚀 Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in

???? Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in (with notice bar progress), supports full upgrade, hot update and incremental upgrade

PengHui Li 344 Dec 30, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Pooja Bhaumik 815 Jan 3, 2023
Minha primeira aplicação android utilizando Flutter feito no curso de Flutter da Cod3r Cursos Online. O foco dessa aplicação foi um contato inicial com o Flutter.

expenses Expenses é uma aplicação android simples feita em Flutter para controlar despesas pessoais. A aplicação consiste em: Listar transações feitas

Guilherme Teixeira Ais 2 Apr 19, 2022
Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Mohammad Rahmani 110 Dec 23, 2022