DEV Community: Coding Monkey

Let's Build a BMI Calculator App with Flutter Part - 2

Coding Monkey — Tue, 26 Jan 2021 03:28:47 +0000

Hey All👋,

I am writing this post in continuation of the previous post where I started creating a BMI Calculator app. which is going to see something like this

Input Page	Result Page

And stopped when our App looked like this

Things To Be Implemented

So as we continue our app development now we need to fill 2 containers to get the weight data and the age of the user.

RoundIconButton custom widget created using the RawMaterialButton
Routes for page navigation
GestureDetector to detect any user interaction with our widget
BMI calculation functions

Building App

Add Weight Input Widget

So as we have collected the user height data now let's collect users weight data but this time around we are going to use the button to get data instead of the sliders.

          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    colour: kActiveCardColor,
                    cardChild: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'WEIGHT',
                          style: kLabelStyle,
                        ),
                        Text(
                          weight.toString(),
                          style: kNumberTextStyle,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            RoundIconButton(
                              icon: FontAwesomeIcons.minus,
                              onPressed: () {
                                setState(() {
                                  if (weight > 30) weight--;
                                });
                              },
                            ),
                            SizedBox(
                              width: 10.0,
                            ),
                            RoundIconButton(
                              icon: FontAwesomeIcons.plus,
                              onPressed: () {
                                setState(() {
                                  weight++;
                                });
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),

class RoundIconButton extends StatelessWidget {
  RoundIconButton({@required this.icon, @required this.onPressed});
  final IconData icon;
  final Function onPressed;
  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Icon(icon),
      onPressed: () {
        onPressed();
      },
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
      elevation: 6.0,
    );
  }
}

To the Next Expanded widget in the container now we have to add the required widgets to have the text weight then the weight data below it the positive and negative buttons to change the weight value we take the most of the info from the previously created widget such as the text style.

Also, we have created a new class to get those round buttons to increase or decrease the weight. Here we are going to create the button using the RawMaterialButton which is the base widget for all the button widgets in the flutter.

In this widget, we taking 2 data one in the icon for the button and onPressed method which tells us what to do when the user clicks on that button. Also some Styling for the button such as the shape of the button elevation and colour of the button.

Same created custom RoundIconButton can be used for the age container. Also, let's move this class to a new file naming it round_button_icon.

               Expanded(
                  child: new ReusableCard(
                    colour: kActiveCardColor,
                    cardChild: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'AGE',
                          style: kLabelStyle,
                        ),
                        Text(
                          age.toString(),
                          style: kNumberTextStyle,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            RoundIconButton(
                              icon: FontAwesomeIcons.minus,
                              onPressed: () {
                                setState(() {
                                  if (age > 1) age--;
                                });
                              },
                            ),
                            SizedBox(
                              width: 10.0,
                            ),
                            RoundIconButton(
                              icon: FontAwesomeIcons.plus,
                              onPressed: () {
                                setState(() {
                                  age++;
                                });
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

So this was simple since the only thing we had to change was changing all the place where we weighted age 😅.

Implement Button To Calculate BMI

So let's create a button upon clicking the button the BMI calculation will be done so let's do it

          Container(
            margin: EdgeInsets.only(top: 10.0),
            color: kBottomContainerColor,
            height: kBottomContainerHeight,
            width: double.infinity,
          )

As we already got many Custom styles implemented so we didn't have to make any changes the global variable to be implemented are

import 'package:flutter/material.dart';

const kBottomContainerHeight = 80.0;
const kBottomContainerColor = Color(0xFFEB1555);
const kActiveCardColor = Color(0xFF1D1E33);
const kInActiveCardColor = Color(0xFF111328);

const kLabelStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

const kNumberTextStyle = TextStyle(
  fontSize: 50.0,
  fontWeight: FontWeight.w900,
);

const kLargeButtonTextStyle = TextStyle(
  fontSize: 25.0,
  fontWeight: FontWeight.bold,
);

Now our input page looks like this

Now it's time to add some logic so that when we click on this button it will take us to result page where we show the result of the BMI calculations

But first, to use the multiple pages first we have to mention the routes we are going to use in the MaterialApp widget under the routes parameter.

MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
      routes: {
        '/result': (context) => ResultPage(),
      },
    );

In the MaterialApp widget app we mention that when we use the /result route then ResultPage() should be loaded.

Now let's use this route by implementing the GestureDetector on the newly created button at the bottom of the app.

          GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/result');
            },
            child: Container(
              child: Text(
                'CALCULATE',
                style: kLabelStyle,
              ),
              margin: EdgeInsets.only(top: 10.0),
              color: kBottomContainerColor,
              height: kBottomContainerHeight,
              width: double.infinity,
            ),

As you can see when we click on the button we are passing the route /result which in turns load the ResultPage class for us but we haven't created any ResultPage class so now let's create a basic class with Scaffold widget

import 'package:flutter/material.dart';

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Text('Hello'));
  }
}

So as of now when clicks on the Calculate button we will be displayed with hello 😎 in the top left side of the app. Now let's start implementing our result page design.

import 'package:BMI_calculator/reusable_card.dart';
import 'package:BMI_calculator/constant.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../components/bottom_button.dart';

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.bottomLeft,
              padding: EdgeInsets.all(15.0),
              child: Text(
                'Your result',
                style: kTitleTextStyle,
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: ReusableCard(
              colour: kActiveCardColor,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Center(
                      child: Text('OVERWEIGHT', style: kResultTextStyle),
                    ),
                  ),
                  Expanded(
                    child: Text(
                      '28.4',
                      style: kBMITextStyle,
                    ),
                  ),
                  Expanded(
                    child: Text(
                      'You have more weight than normal body weight. Try exercising more.',
                      textAlign: TextAlign.center,
                      style: kBodyTextStyle,
                    ),
                  ),
                ],
              ),
            ),
          ),
          BottomButton(
            buttonText: 'RE - CALCULATE',
            route: '/',
          ),
        ],
      ),
    );
  }
}

So I have provided the whole code of our result page design since most of our code is repeated which we did for the input page with few changes such as flex value 😅(it's been a long post so just want to complete it fast 😣 sorry).

Time To Create Brain of The App

So as we are done with the design part now it's time to give some brainpower to our app so what we want to do now is just to take the height and weight of the user calculate the BMI value based on that and some interpretation based on the BMI value.

import 'dart:math';

class CalculatorBrain {
  CalculatorBrain({this.height, this.weight});

  final int height;
  final int weight;
  double _bmi;

  String calculateBMI() {
    _bmi = weight / pow(height / 100, 2);
    return _bmi.toStringAsFixed(1);
  }

  String getResult() {
    if (_bmi >= 25) {
      return 'Overweight';
    } else if (_bmi > 18.5) {
      return 'Normal';
    } else {
      return 'Underweight';
    }
  }

  String getInterpretation() {
    if (_bmi >= 25) {
      return 'You have higher than normal body weight. Try exercising more.';
    } else if (_bmi > 18.5) {
      return 'You have a normal body weight. Good job!.';
    } else {
      return 'You have lower than normal body weight. You can eat bit more.';
    }
  }
}

so now we have created a total of 3 methods one to calculate BMI another to check if your is overweight or underweight and the last one to pass interpretation to the user based on BMI value.

So let's make those change to use these methods in our app

          BottomButton(
            buttonText: 'CALCULATE',
            onTap: () {
              CalculatorBrain calc =
                  CalculatorBrain(height: height, weight: weight);
              Navigator.pushNamed(
                context,
                ResultPage.routeName,
                arguments: ResultPage(
                  bmiResult: calc.calculateBMI(),
                  resultText: calc.getResult(),
                  interpretation: calc.getInterpretation(),
                ),
              );
            },
          ),

Also Now let's use those methods to display our result page.

import 'package:BMI_calculator/reusable_card.dart';
import 'package:BMI_calculator/constant.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../bottom_button.dart';

class ResultPage extends StatelessWidget {
  static const routeName = '/result';
  ResultPage({this.bmiResult, this.resultText, this.interpretation});

  final String bmiResult;
  final String resultText;
  final String interpretation;
  @override
  Widget build(BuildContext context) {
    final ResultPage resultPage = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.bottomLeft,
              padding: EdgeInsets.all(15.0),
              child: Text(
                'Your result',
                style: kTitleTextStyle,
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: ReusableCard(
              colour: kActiveCardColor,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Center(
                      child: Text(
                        resultPage.resultText,
                        style: kResultTextStyle,
                      ),
                    ),
                  ),
                  Expanded(
                    child: Text(
                      resultPage.bmiResult,
                      style: kBMITextStyle,
                    ),
                  ),
                  Expanded(
                    child: Text(
                      resultPage.interpretation,
                      textAlign: TextAlign.center,
                      style: kBodyTextStyle,
                    ),
                  ),
                ],
              ),
            ),
          ),
          BottomButton(
            buttonText: 'RE - CALCULATE',
            onTap: () {
              Navigator.pushNamed(
                context,
                '/',
              );
            },
          ),
        ],
      ),
    );
  }
}

First, let's create a constructor which takes the BMI result, result text and interpretations. also we are going to implement navigation to input page when use click on the RECALCULATE button.

You can get the complete code from this repo

Thank you

So by Now you also might have the BMI calculator app in your phone. Also, there are so many things that could be added such as using the gender data we are storing and age of the user. Also, we can add more comprehensive interpretation to the user and many more.

It was quite a long post which was divided into 2 parts. If you liked it leave like or comment (Both are fine by me). If you find any mistakes do leave a comment for me so I can correct myself also comments on improving my article are most welcomed. 😁

Soon I will come with a new post as I continue to learn the flutter by following the Angela Yu courses.

Let's Build a BMI Calculator App with Flutter Part - 1

Coding Monkey — Tue, 26 Jan 2021 03:28:19 +0000

Hey All,

I back with yet another app which I built while following the Angela Yu course which I am going to share with you guys. This BMI Calculator app is heavy on design and does need more improvements to functionality perspective. Let me give you a glimpse of what we are going to build in this blog 😁

Input Page	Result Page

Introduction

So by creating this BMI Calculator app we are going to learn a few concepts of the Flutter. So let me make a list of it :

Route Navigation
Custom widget Creation
Slider Theme
Customizing the In-Built widgets

So let's get started.

Building the App

So, as usual, let's start by creating the flutter project by using the flutter command

flutter create BMI_Calculator

which got default app code so let's just remove it. Also as I don't know how to write flutter test so I will just delete the test folder. Also, let's add the App icon by changing the images in respective Android and iOS folders. (I have heard that there is a package which takes care of changing the app icon need to check it out 😅)

Customising the App Theme

So you all know that our app has the default white colour theme for our app and we can change the theme to black changing the themeData parameter of MaterialApp to ThemeData.dark()
So now let's try to our custom touch to the existing dark theme we only need to make changes in the places we want to rest will be taken from the dark theme

import 'package:flutter/material.dart';

void main() {
  runApp(BMICalculator());
}

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
    );
  }
}

As you can see we can make changes to the existing dark theme using the .copyWith() method of the theme_data class. So what we are doing here is we are providing the Our custom colour as the primary colour of the theme which will be changing from the back to our own colour. Same goes of the scaffolds background as well so inside of the app also get's the same colour. So our app now looks like this:

Creating container By creating Custom Widget

So If we have some collection of widgets which we used to build something if we are going to use it again and again just like the function we can create our own widget so that we just have to call the widget we don't have to repeat the same line of code again and again. So let's Just try to Build this.

So we'll build the widget which will build the containers as you can see in the above image

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              margin: EdgeInsets.all(15.0),
              decoration: BoxDecoration(
                color: Color(0xFF1D1E33),
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

So as you can see right now we have a container which is covering the whole screen as we are using the Expanded widget 😅. So as per the image, we need 4 more of these containers 2 at the top, 2 at the bottom and 1 in the middle which we can handle using the Column and Row widgets.

So now we can convert this widget into a custom widget so we can use it at multiple places which can be done with simple steps with the android studio (Not sure about vs code as I don't have much experience with it for a flutter. 😔).

Now click on Flutter outline at the top right of the screen then you will be given with the widget tree so click on the widget at which you want to create a custom widget then select the Extract widget so then you can see that there will new widget created at the bottom of the dart file. make the changes as you require and give a name to your widget (You can use this widget across the project you just have to copy and paste this class in your required project though 😅).

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  const ReusableCard({@required this.colour});
  final Color colour;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        color: colour,
        borderRadius: BorderRadius.circular(10.0),
      ),
    );
  }
}

So I have extracted the widget and created a different file for this widget and named it as ReusableCard 😎 So now if you want to use this widget you just have to import the class and you can use the widget in your page.

So now let's update the Our input page to use this custom widget to get our required UI design.

const activeCardColor = Color(0xFF1D1E33);
class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: new ReusableCard(
              colour: activeCardColor,
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

So now we are importing our custom ReusableCard however we require and get our required design done. Also, you might have noticed we have to change the colour to variable name so we don't have to change it manually wherever we used the widget.

Adding Icons to the Container

So we are have achieved the current design requirement now let's get to the next goal of our Design requirement which is adding the icon to the Containers.

So as we have seen we can again create a custom widget which handles the adding icon and adding the Text below that icon. So let's try to create it.

But now we have a problem that as we are using our own custom ReusableCard widget we can't pass any child parameter to it so we need to add a parameter that can pass our widget to the class so we can add it as the child widget in ReusableCard widget.

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  const ReusableCard({@required this.colour, this.cardChild});
  final Color colour;
  final Widget cardChild;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: cardChild,
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        color: colour,
        borderRadius: BorderRadius.circular(10.0),
      ),
    );
  }
}

to achieve the above-discussed solution we now have added the Widget data variable named as cardChild which helps us in assigning the passed Widget to the child parameter in the class.

import 'package:flutter/material.dart';

const labelStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

class IconContent extends StatelessWidget {
  const IconContent({@required this.icon, @required this.label});

  final IconData icon;
  final String label;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          icon,
          size: 80.0,
        ),
        SizedBox(
          height: 15.0,
        ),
        Text(
          '$label',
          style: labelStyle,
        )
      ],
    );
  }
}

So for the icons, we are going to use a package named font_awesome which provides us with a lot of the icons to use in our app. we can add this package to our project by updating the pubspec.yaml file.

name: BMI_calculator
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  font_awesome_flutter: ^8.11.0

dev_dependencies:
  flutter_test:
    sdk: flutter

# The following section is specific to Flutter.
flutter:

  uses-material-design: true

So to use the above widget we just have to pass it as a child to the ReusableCard widget.

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.mars,
                      label: 'MALE',
                    ),
                    colour: activeCardColor,
                  ),
                ),
                Expanded(
                  child: new ReusableCard(
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.venus,
                      label: 'FEMALE',
                    ),
                    colour: activeCardColor,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: new ReusableCard(
              colour: activeCardColor,
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

So now we have our Male and Female containers in our UI. Now let's try to make the container selectable and when one card is selected other card needs to deselect.

So let's start once again by Updating our ReusableCard widget to support click action.

As we know only buttons can have on press support if we want to add the same onPress to other widgets we have to wrap our widget inside the GestureDetector widget which looks for different sorts of the action can be performed on the screen such as click, double click or long-press etc.

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  const ReusableCard({@required this.colour, this.cardChild, this.onPress});
  final Color colour;
  final Widget cardChild;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

Now we are accessing Function which tells us what action to be performed when user taps on our widget. So now we have made certain changes in inputPage class so when the user clicks on that card the colour of the card changes.

enum Gender { Male, Female }
const activeCardColor = Color(0xFF1D1E33);
const inActiveCardColor = Color(0xFF111328);

class _InputPageState extends State<InputPage> {
  Gender selectedGender;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    onPress: () {
                      setState(() {
                        selectedGender = Gender.Male;
                      });
                    },
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.mars,
                      label: 'MALE',
                    ),
                    colour: selectedGender == Gender.Male
                        ? activeCardColor
                        : inActiveCardColor,
                  ),
                ),
                Expanded(
                  child: new ReusableCard(
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.venus,
                      label: 'FEMALE',
                    ),
                    onPress: () {
                      setState(() {
                        selectedGender = Gender.Female;
                      });
                    },
                    colour: selectedGender == Gender.Female
                        ? activeCardColor
                        : inActiveCardColor,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: new ReusableCard(
              colour: activeCardColor,
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
                Expanded(
                  child: new ReusableCard(
                    colour: activeCardColor,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

So now we are creating an enum for genders so we can access them easily. Next, we creating setState() method to the onPress parameter which tells us about which gender card is selected.
Next, we change the colour of the card based on which gender card is selected.

Moving all global variables to Constant file

As you might have observed we are having so many global variables all over the place. To refactor the code let's just move all those global variables to the constant file which we are going to use to store all the global variables.

import 'package:flutter/material.dart';

const kBottomContainerHeight = 80.0;
const kBottomContainerColor = Color(0xFFEB1555);
const kActiveCardColor = Color(0xFF1D1E33);
const kInActiveCardColor = Color(0xFF111328);

const labelStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

So you also update these variable names in appropriate classes as I can't show changes by that I have to display all the code once again 😔 as already this post is large let's just don't make it any bigger 😣.

Add Slider to Add Height data

Now let's add a slider which will be used by the user to provide height for the BMI calculations.
So now In the container in the middle of the screen, we are going to add our slider along with header saying HEIGHT along with cm bottom of this will be having slider.

          Expanded(
            child: new ReusableCard(
              colour: kActiveCardColor,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'HEIGHT',
                    style: kLabelStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      Text(
                        height.toString(),
                        style: kNumberTextStyle,
                      ),
                      Text(
                        'cm',
                        style: kLabelStyle,
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),

So we have added the Top text using the Text widget next we are trying to read the data set by the slider to display the height of the person followed by cm in subscript. The constant values for the kNumberTextStyle and kLabelStyle are

import 'package:flutter/material.dart';

const kBottomContainerHeight = 80.0;
const kBottomContainerColor = Color(0xFFEB1555);
const kActiveCardColor = Color(0xFF1D1E33);
const kInActiveCardColor = Color(0xFF111328);

const kLabelStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

const kNumberTextStyle = TextStyle(
  fontSize: 50.0,
  fontWeight: FontWeight.w900,
);

Next comes the main thing of this container that is adding the slider to the app. which canbe done through using the SliderTheme widget.

          Expanded(
            child: new ReusableCard(
              colour: kActiveCardColor,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'HEIGHT',
                    style: kLabelStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      Text(
                        height.toString(),
                        style: kNumberTextStyle,
                      ),
                      Text(
                        'cm',
                        style: kLabelStyle,
                      )
                    ],
                  ),
                  SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      activeTrackColor: Colors.white,
                      inactiveTrackColor: Color(0xFF8D8E98),
                      thumbColor: Color(0xFFEB1555),
                      overlayColor: Color(0x29EB1555),
                      thumbShape:
                          RoundSliderThumbShape(enabledThumbRadius: 15.0),
                      overlayShape:
                          RoundSliderThumbShape(enabledThumbRadius: 30.0),
                    ),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      onChanged: (double newValue) {
                        setState(() {
                          height = newValue.round();
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),

First let's use the Slider offered by the flutter make our own custom changes Like activeTrackColor, inactiveTrackColor etc.
Next, we have got the data from the slider which can be done through by setting setState() function to get the value at which the slider is at. also, the min and max value that can be set by the slider.

Thank you

So If you have got here then you also have the half the app done with you now you can try to complete the next half of the design till I come back with next part of this post.

So by Now Half our design work is done also, we came across many problems and solution throughout the process. we started with customizing the theme of the app then created the custom widgets then we also customized the slider to suit our design.

Initially, I thought of completing the whole app in a single post but as I progressed I came to know it is so large I won't be able to complete it in a single post so I have decided to split this post into 2 posts. I think I will post both posts at the same time so you guys can have a complete post at the same time don't have to wait for the next part of the post.

So now if you found this post interesting and likeable leave a like or comment for me (Both is also fine with me 😉). If you found any mistakes then do let me know so I can correct myself. till then
αντιο σας 👋

Let's Create a True-False Quiz Game App Using the Flutter

Coding Monkey — Sun, 10 Jan 2021 08:00:19 +0000

Hey All,

It's been a week since the last post was busy with work but don't mind as I will still doing the Angela Yu course I am back with 2 more apps I have created while following the Course which I will tell about in this and My next post 😉.

Introduction

So In this post, we'll be creating a true or false quiz app we have named it Quiz_app for simplicity. while creating this app we'll learn about these concepts in the flutter:

Alert package
FlatButton
And Lot's of OOP concepts

Implementation

So let's begin right away. By the end, our app going to look like this:

Base setup

As you already know let's set up our base setup by running the flutter command flutter create Quiz_app.

So next as we are not going to write any test cases just remove the test folder 😔. And Cleanup the main.dart which contains the default app code.

You can get the whole code setup in this repo

Create True-False and Place for the Question

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: Quizzler(),
      ),
    ),
  );
}

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        child: QuizPage(),
      ),
    );
  }
}

class QuizPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container();
  }
}

So As you can it is some large amount of code but just start making sense of the one line at a time.

first the main() which will be called when the app is getting build then using the MaterialApp we are going to build the base of the app next we are using the scaffolding we are placing the all the widget inside of the screen and we are setting the background colour to grey so make it look better.

Next up the StatelessWidget, only part of the code is not going to be changed. So inside this class, we are going to add the SafeArea widget which prevents the widgets from the overflow outside of the screen. So that none of the information get lost out of the screen 😅. Next, let's add some padding between all the widget we are going to add and the screen end to make them look better.

Next, we are creating the StatefulWidget which changes upon user actions and naming the class as QuizPage as it contains the code related to the Quiz display page. Inside this class, we are going to create the 2 button widgets and then a Text widget to display the question. To use this class let's add the Constructor to the child in the StatelessWidget class.

As we are going to add multiple widgets one below the other we need to use the Column widget which helps us in displaying the multiple widgets in a single screen.

A widget that displays its children in a vertical array.

To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget.

The Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

class QuizPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'This is where question go',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Next, Create the Text widget which we are going to use to display the question. Create a Text widget which some text like this is where the question goes and align the text to the centre using the textAlign parameter. Next up to give some text style using the TextStyle widget which helps us setting up the font style such as font size, font family etc. and also the colour in which text should be displayed (You can play around with colour and choose which you want to display it in).

class QuizPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'This is where question go',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              onPressed: () {},
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Now it's Time to add the True Button using the FlatButton widget. And let's make the Colour of the Button as Green which always symbolises the true. using the child parameter let's add text on the button which says True so the user will know which button is true and which is false and some style to the text so button looks better.

Now it's time for you to add the false button and now our app looks like this:

Now it's not looking that much good with those large buttons so let's try to make the buttons smaller and give more space to the Question which can be done adding a single line which is flex in Expanded widget which tells how much space is given to which widget. (Just like the flex in CSS)

class QuizPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          flex: 6,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'This is where question go',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              onPressed: () {},
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.red,
              onPressed: () {},
              child: Text(
                'False',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Now our app looks are done it's time to add the question and answers to the List and display them one by one.

Create a Question and QuizBrain class to hold the question

class Question {
  String question;
  bool answer;

  Question(String question, bool answer) {
    this.question = question;
    this.answer = answer;
  }
}

This class helps us accessing the one question and answer at time to display them on the screen.

Now it's time to add the brain to our app. which stores the questionnaire and method to access the question and answer so the user can't inter with the question and answer.

import 'package:quiz_app/Question.dart';

class QuizBrain {
  List<Question> _questionBank = [
    Question('Some cats are actually allergic to humans', true),
    Question('You can lead a cow downstairs but not upstairs.', false),
    Question('Approximately one-quarter of human bones are in the feet.', true),
  ];

  String getQuestion(int questionNumber) {
    return _questionBank[questionNumber].question;
  }

  bool getCorrectAnswer(int questionNumber) {
    return _questionBank[questionNumber].answer;
  }
}

So as you can see we have created the List of the Question which holds the question and answers and 2 methods which helps in getting the question and to check if the user answer is correct or not.
Also, we are using the Quiz constructor to create the Question objects which holds the question and answer and object is the best way to store the multiple types of data.

Now it's time to add this to our app.

QuizBrain quizBrain = QuizBrain();

class _QuizPageState extends State<QuizPage> {
  int questionNumber = 0;

  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          flex: 6,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                quizBrain.getQuestion(questionNumber),
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              onPressed: () {
                var correctAnswer = quizBrain.getCorrectAnswer(questionNumber);
                if (correctAnswer == true) {
                  setState(() {
                    questionNumber++;
                  });
                } else {
                    SetState(() {
                       questionNumber++;
                    });
                }
              },
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.red,
              onPressed: () {
                var correctAnswer = quizBrain.getCorrectAnswer(questionNumber);
                if (correctAnswer == false) {
                    SetState(() {
                       questionNumber++;
                    });
                } else {
                    SetState(() {
                       questionNumber++;
                    });
                  });
                }
              },
              child: Text(
                'False',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

So now let's create the object for the QuizBrain for so that we can use the methods offered by the class since the List is defined as private we can't access that data directly so we are using the methods to get the data now in the app we have made several changes such we have added SetState so that when user click on any of the answers then the question number get updated and next question is displayed to the user. and Now just need to add the quizBrain.getQuestion(questionNumber) to get the question from the quizBank and display on the screen based on the question number and using the var correctAnswer = quizBrain.getCorrectAnswer(questionNumber); we are taking the answer of that question and storing on a variable so we can check if the user clicks answer is correct or not.

Now let's add the Scoring System

Now as we have the quiz we also need some sort of scoring system so that user can know how many answers did he got right and how many wrong. So to do that let's use the right and cancel Icons offered by the Icon Widget.

To reduce the repetition of code we just create a method which checks if the users answer is right or wrong and update the scoring system and also increase the question number to get the next question.

void checkAnswer(bool userPickedAnswer) {
    bool correctAnswer = quizBrain.getCorrectAnswer();
    setState(() {
      if (userPickedAnswer == correctAnswer) {
        scoreKeeper.add(
          Icon(
            Icons.check,
            color: Colors.green,
          ),
        );
      } else {
        scoreKeeper.add(
          Icon(
            Icons.close,
            color: Colors.red,
          ),
        );
      }
      questionNumber ++;
    });
  }

As you can see we are taking the user click as a parameter and check with the correct answer then based on the result we are going to add the Icon to the scorekeeper list which is the List list of Icon type.
As you know Icon widget provides us with a lot the inbuilt icons to use now we just need to customise it a bit like adding the colour to them like check as green and close to red to symbolism.
Also, we are displaying these Icons by creating a Row widget at the end of the Icon widget which holds the Button and Text which displays the question and buttons. As we want to display the side of the icon by side we are using the Row widget.

class _QuizPageState extends State<QuizPage> {
  List<Icon> scoreKeeper = [];

  void checkAnswer(bool userPickedAnswer) {
    bool correctAnswer = quizBrain.getCorrectAnswer();
      setState(() {
        if (userPickedAnswer == correctAnswer) {
          scoreKeeper.add(
            Icon(
              Icons.check,
              color: Colors.green,
            ),
          );
        } else {
          scoreKeeper.add(
            Icon(
              Icons.close,
              color: Colors.red,
            ),
          );
        }
        quizBrain.getNextQuestion();
      });
    }
  }

  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          flex: 6,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                quizBrain.getQuestion(),
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              onPressed: () {
                checkAnswer(true);
              },
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.red,
              onPressed: () {
                checkAnswer(false);
              },
              child: Text(
                'False',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
        Row(
          children: scoreKeeper,
        )
      ],
    );
  }
}

We passing the scoreKeeper List of Icon which is widget list which is required by the Row widget so we don't need any extra lines of code

Next, we need to check for the end question bank which results in error page as we are trying to access the data which Is not there so and also to make more the abstraction we are going to move the question number to the QuizBrain so we can add more to abstraction to our class.

import 'package:quiz_app/Question.dart';

class QuizBrain {
  int _questionNumber = 0;

  List<Question> _questionBank = [
    Question('Some cats are actually allergic to humans', true),
    Question('You can lead a cow downstairs but not upstairs.', false),
    Question('Approximately one-quarter of human bones are in the feet.', true),
  ];

  void getNextQuestion() {
    if (_questionNumber < _questionBank.length - 1) {
      _questionNumber++;
    }
  }

  String getQuestion() {
    return _questionBank[_questionNumber].question;
  }

  bool getCorrectAnswer() {
    return _questionBank[_questionNumber].answer;
  }

  bool isFinished() {
    if (_questionNumber >= _questionBank.length - 1)
      return true;
    else
      return false;
  }

  void reset() {
    _questionNumber = 0;
  }
}

So now we have 3 more methods one to get the next question one to check if we are at the end of question bank and one to reset the question number to zero when we hit the end of the question bank.

So let's update the main.dart file a little to add these changes to our code

void checkAnswer(bool userPickedAnswer) {
    bool correctAnswer = quizBrain.getCorrectAnswer();
    if (quizBrain.isFinished()) {
      quizBrain.reset();
      scoreKeeper.clear();
    } else {
      setState(() {
        if (userPickedAnswer == correctAnswer) {
          scoreKeeper.add(
            Icon(
              Icons.check,
              color: Colors.green,
            ),
          );
        } else {
          scoreKeeper.add(
            Icon(
              Icons.close,
              color: Colors.red,
            ),
          );
        }
        quizBrain.getNextQuestion();
      });
    }
  }

So we are now done with creating a quiz app which shows the user question with a true and false option based on user answer if the users answer was right we are going to display the score at bottom of the screen. Once we hit the end the scorekeeper is reset and the questions are again displayed from the beginning.

Let's add Alert to Show End of Quiz

So to add the alert we are going to import the rflutter_alert from the pub.dev which helps us in creating an alert message which we are going to display the congratulations at the end to the quiz. So by following the instruction let's just add the dependency in pubsec.yaml file and import the package.
Then we just need to this line of code

if (quizBrain.isFinished()) {
      Alert(
              context: context,
              title: "Quiz Score",
              desc: "You've completed the quiz.")
          .show();
      quizBrain.reset();
      scoreKeeper.clear();
    }

So by this, we are going to get displayed with an alert like this:

Thank you

If you are still reading and got your own quiz app you just can add more question to the question bank and more customization to your app such as displaying the score in the alert and also based on the score you can display different type of alerts, etc.

Thanks for reading this lengthy post 🙏 if you liked the post leave a like and comment that will give me some motivation to keep this up. Also, leave comment definitely if you find any mistakes so I can correct myself.

In next post, I will be back one more app which is almost similar to this app but it will be story-based quiz by mean depending on the user answer are going to display the next question 😎.

till then अलविदा 👋

Let's Build a Homemade Xylophone Flutter App

Coding Monkey — Mon, 04 Jan 2021 03:26:50 +0000

Hey All,

I am back with yet another app I have built while following the Angela Yu course on Udemy so I can share with you guys what I have learnt from it. So without further ado let's get started.

Things To Learn And Implement

These are the list of thing we are going to learn by the end of the creation of this app.

FlatButton widget
Expanded widget (Once again)
Importing package and Using it
Playing the local sound on Audio in-app
Different type of function call

Let's Create our Xylophone App

By the End our App is going to look something like this:

where each button is associated with a sound note (Can't show it you guys how it works 😔 for that you have to build on your own😅).

Setting Up the Base Setup

So by now you already know that the base setup for our app can be done with a single flutter command.

flutter create xylophone

Now let's update the App icons for both Android and iOS by changing them In there respective folders.

Also, let's add the required note sounds after creating the asset folder and store it in this folder. Also, let's update the pubsec.yaml so that flutter recognises the added note sound files.

name: xylophone
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

# The following section is specific to Flutter.
flutter:

  uses-material-design: true

  assets:
   - assets/

and run the flutter pub get to update the flutter dependencies.

You can clone this repo which contains the complete code with required assets for our app.

Let's create FlatButtons for each Sound Note

So now let's create a flat button and make it play a sound note when it's clicked.

So now let's start with our app coding

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Xylophone(),
      ),
    ),
  );
}

class Xylophone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

This provides us with a pitch Black background app without any app bar.

Now let's create a FlatButton widget which provides us with a button without any elevation. Also, the FlatButton is Now replaced By TextButton Widget

A Material Design "Text Button".

Use text buttons on toolbars, in dialogues, or inline with other content but offset from that content with padding so that the button's presence is obvious. Text buttons do not have visible borders and must therefore rely on their position relative to other content for context. In dialogues and cards, they should be grouped in one of the bottom corners. Avoid using text buttons where they would blend in with other content, for example in the middle of lists.

A text button is a labelled child displayed on a (zero elevation) Material widget. The label's Text and Icon widgets are displayed in the style's ButtonStyle.foregroundColor. The button reacts to touches by filling with the style's ButtonStyle.backgroundColor.

So Now let's 7 buttons with a different colour so we can distinguish each of them. ( I will display the code after I explain about the Importing packages)

Importing the Audioplayer package

Now as I told we need to play a tone which each of the buttons is clicked. So to make that audio play we are going to use the package which is already created by other developers so can we don't have to create our own custom code to make the audio player for our App.

To import package first we need to find the package which suits our need. So let's go to the flutter package which holds all the list of the packages which we can use in our project.

Once we are on the website now let's search for the audio player package which we want to play the sound when we click on the button. In result, we might get many packages with almost similar implementation out of which we have to pick the package which is best suited for the project still if you find multiple packages fulfilling your requirement then check the package pub points and popularity so that you will be using the package which has the best solution and which are frequently used by the other developers😉.

Once you pick your package now let's open that package and read the documentation which explains us about the package like how to install, Examples of use cases, etc.

By following the Installation steps mentioned in the documentation. So let's use the audioplayer package in our project. So the Updated Yaml looks like this:

name: xylophone
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  audioplayers: 0.17.0   // This the package we have got from the flutter packages.

dev_dependencies:
  flutter_test:
    sdk: flutter

# The following section is specific to Flutter.
flutter:

  uses-material-design: true

  assets:
   - assets/

Now to Use this in our app just run the flutter pub get command so the package gets add as an external library in our project.

Now let's import the package and create an object for the player so we can use the functionalities offered by the package.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Xylophone(),
      ),
    ),
  );
}

class Xylophone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note1.wav');
            },
            child: null,
            color: Colors.red,
          ),
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note2.wav');
            },
            child: null,
            color: Colors.orange,
          ),
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note3.wav');
            },
            child: null,
            color: Colors.yellow,
          ),
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note4.wav');
            },
            child: null,
            color: Colors.green,
          ),
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note5.wav');
            },
            child: null,
            color: Colors.green.shade900,
          ),
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note6.wav');
            },
            child: null,
            color: Colors.blue,
          ),
          FlatButton(
            onPressed: () {
              final player = new AudioCache();
              player.play('note7.wav');
            },
            child: null,
            color: Colors.purple,
          ),
        ],
      ),
    );
  }
}

As you can see in the Code we have Seven FlatButton which each is set to play a tone when clicked. Also, we have used the Column widget to display the all button in a column and By using the SafeArea widget that inserts its child by sufficient padding to avoid intrusions by the operating system.

And the

    final player = new AudioCache();
    player.play('note1.wav');

Creates an object for AudioCache class which has the code for the locally stored audio files and then through the object we are accessing the method which helps us in playing the audio.
(So simple right 😎 think of the time we saved from writing all those codes which we had to write make the audio player if didn't have this package.). Also we not going to change the variable player so we are making it as final which prevents the variable modification.

Also, one more thing that as you can see that we are directly mentioning the audio file name without folder name that is due to audioplayer package consider that audio files are stored inside the asset folder.

As of now, our app looks like this:

As you can see that buttons are not covering the whole screen which can be taken care By adding the single line inside the Column widget we can make those buttons to stretch to the end of the screen that is
crossAxisAlignment: CrossAxisAlignment.stretch by adding this line the buttons are made stretch horizontally to cover the whole screen

Now as you can see that we have many repeated lines of code so we can reduce it make our code look better and cleaner by creating a function which can be used instead of repeating the same line of code again and again.

Creation of Function for the Sound Play

So let's create the function named playSound which got the code for creating the object of the AudioCache class and from that object we are accessing the play function offered by that class.

Function is a set of statements that take inputs, do some specific computation and produces output. Functions are created when certain statements are repeatedly occurring in the program and a function is created to replace them. Functions make it easy to divide the complex program into smaller sub-groups and increase the code reusability of the program.

Basically, there are four types of functions in Dart. These are as follows:

No arguments and no return type
With arguments and no return type
No arguments and return type
With arguments and with return type

So as we don't have to return anything but we need to change the sound note depending on the button so we are gonna need the With arguments and no return type type of function.

class Xylophone extends StatelessWidget {
  void playSound(int noteNumber) {
    final player = new AudioCache();
    player.play('note$noteNumber.wav');
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          FlatButton(
            onPressed: () {
              playSound(1);
            },
            child: null,
            color: Colors.red,
          ),
          FlatButton(
            onPressed: () {
              playSound(2);
            },
            child: null,
            color: Colors.orange,
          ),
          FlatButton(
            onPressed: () {
              playSound(3);
            },
            child: null,
            color: Colors.yellow,
          ),
          FlatButton(
            onPressed: () {
              playSound(4);
            },
            child: null,
            color: Colors.green,
          ),
          FlatButton(
            onPressed: () {
              playSound(5);
            },
            child: null,
            color: Colors.green.shade900,
          ),
          FlatButton(
            onPressed: () {
              playSound(6);
            },
            child: null,
            color: Colors.blue,
          ),
          FlatButton(
            onPressed: () {
              playSound(7);
            },
            child: null,
            color: Colors.purple,
          ),
        ],
      ),
    );
  }
}

Create one more Function for Button build

Still, we can see the repeated code for building the Expanded FlatButtons so let's create a function for that as well but
as you can see this since we are going to call the function from inside of the Column widget it expects a widget in return from the function so the function return type should be a widget and next we also need to provide the colour of the button and number of the sound note be played for that button so we are going to use the named parameter in the function so that there will be confusion with the parameters to be passed with function.

class Xylophone extends StatelessWidget {
  void playSound(int noteNumber) {
    final player = new AudioCache();
    player.play('note$noteNumber.wav');
  }

  Expanded buildKey({Color color, int noteNumber}) {
    return Expanded(
      child: FlatButton(
        onPressed: () {
          playSound(noteNumber);
        },
        child: null,
        color: color,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          buildKey(color: Colors.red, noteNumber: 1),
          buildKey(color: Colors.orange, noteNumber: 2),
          buildKey(color: Colors.yellow, noteNumber: 3),
          buildKey(color: Colors.green, noteNumber: 4),
          buildKey(color: Colors.teal, noteNumber: 5),
          buildKey(color: Colors.blue, noteNumber: 6),
          buildKey(color: Colors.purple, noteNumber: 7),
        ],
      ),
    );
  }
}

Viola, now you see that by how many lines code we have reduced from our code using the single function.

Here is our final product which creates the sound note on clicking on the button.

Challenges Faced

Challenges to be faced with this project was to play the audio depending on each button and making the code clean and can be reused and finally use of the import with the dart language.

The Button creation issue we overcame through the use of the FlatButton widget.
Audio play, we imported the audioplayer package which had the functionality to play the audio and we made those function to play the audio on clicking the button
We removed the repeated lines of code by the use of Functions

Summary

To summarise the whole thing by creating this app we learnt the use of the import and how to use it. Using the audio player to play the audio. use of the flat button with column and stretch it across the screen and different types of the functions.

Thank you

Thank for reading the Blog till now (If you have read it till now 😅). Leave a like and comment if you liked the blog and definitely leave a comment if you found any mistakes so that I can correct myself.
In next the blog, I will be back with the Quiz with the scoring system (I have just seen the preview of the app in the course and I will share with the guys what I have learnt from creating that app 😉)

Till then 再见 👋

Let's create Dice Game App using Stateful Widget In Flutter

Coding Monkey — Wed, 30 Dec 2020 08:45:02 +0000

Hi All,

Since the Last Blog, I am getting many followers and views(Not sure why though😅) But I am happy for it And I Thank all who decided to follow me. I will strive hard to give better content for you All.

Introduction

As I continued to learn from the Angela Yu Udemy course In the Next chapter these are the things I have learnt that I am going to explain it to you guys as well:

Stateful Widget
Flat Button
Expanded widget
Random Function

So let's create the Dice Game along with learning new concepts in Flutter. At the end out App is going to look like this:

Coding Section

So let's begin with our Basic setup which has to be followed in every project. But which is so easy in Flutter since flutter provides commands to generate the basic setup.

flutter create dice_game

Upon running the command we will get the all required files and folder get generated for us. Now let's Remove all non-required content and make changes according to our need. Such as adding the App icon and removing the content from the main.dart which got the code for the exemplary app. Also, store the dice face images which we are going to use in our app. (Which you might now how to do from my previous blog where I explained about it.😁)

MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          title: Text('Dice Game'),
          backgroundColor: Colors.lightBlue,
        ),
        body: DicePage(),
      ),
    ),
  );
class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Upon running the code we will be having a basic app with light blue background and App bar saying, Dice Game.

So now Let's add 2 dice images to the app. Using Image.asset widget which is the short and easy form of the Image widget which we previously used.

Image(image: AssetImage('images/dice1.png')) //Previous Method
Image.asset('images/dice1.png') // Simpler method 
                     //which does the same work as above one

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Image.asset('images/dice1.png'),
        Image.asset('images/dice1.png'),
      ],
    );
  }
}

So If you try to run this code you might come across an error saying A RenderFlex overflowed by 596 pixels on the right. which is due to not controlling the image sizes so the image is overflowing outside the phone screen. Now we have to make the image to stay inside the screen that can be done 2 ways:

Hard coding the image size using the width and height parameter in the Image Widget (which will not be optimal since there are so many devices with different screen sizes.)
Use of Expanded widget.

The Expanded widget makes the images to cover as much size is available in the screen but will not overflow outside the screen. When we have multiple images then it tries to cover the screen size using both images by dividing the available space.( which we want for our use case)

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(child: Image.asset('images/dice1.png')),
        Expanded(child: Image.asset('images/dice1.png')),
      ],
    );
  }
}

So by covering the Image widget with Expanded widget the images are now not overflowing out of the screen.

Now let's add some space between the dices using the Padding widget. Also, let's bring those dices to the centre of the screen Which can be directly done by covering the Row widget
with Center widget.

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Image.asset('images/dice1.png'),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Image.asset('images/dice1.png'),
            ),
          ),
        ],
      ),
    );
  }
}

Now let's Make those images get picked randomly using the Random Class which creates the random number for us.
First, let's convert the number in the image name as a variable so we can update it as we want and assign random values from 1-6 to that variable so every time we restart the app the new dice face is displayed. (Also forgot to mention I have named the all the images as dice<facevalue>.png to use like this. 😅)

class DicePage extends StatelessWidget {
  int leftDiceValue = Random().nextInt(6) + 1;
  int rightDiceValue = Random().nextInt(6) + 1;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Image.asset('images/dice$leftDiceValue.png'),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Image.asset('images/dice$rightDiceValue.png'),
            ),
          ),
        ],
      ),
    );
  }
}

Random().nextInt(max) Generates a non-negative random integer uniformly distributed in the range from 0, inclusive, to max, exclusive.

The Random().nextInt(max) function provides us with a random int Number from 0 to max but not the max value. for our case it's 0 - 6 but not 6 also we don't want the value 0 so let's tweak this function a little:

 int leftDiceValue = Random().nextInt(6) + 1;

so the min value becomes 1 and max value 6.

Next to the use of images/dice$leftDiceValue.png which is called string interpolation. Where we pass the variable name using the $<variablename>. (Here the Article with Complete Dart Intro)

Once Randomise is out of the way now let's make those images a button so when we click on those images some action is performed such as updating the Dice face images. Also, as we are going to use the variables which can be mutable so we need to change the StatelessWidget to StatefulWidget.

To do that first we need to use the StatefulWidget which handles the changing the state in the state whenever there are some changes app redraw the first parent Build function it finds.

A widget that has mutable state.

State is information that (1) can be read synchronously when the widget is built and (2) might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState.

Stateful widgets are useful when the part of the user interface you are describing can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state. For compositions that depend only on the configuration information in the object itself and the BuildContext in which the widget is inflated, consider using StatelessWidget.

So let's convert our StatelessWidget to StatefulWidget which can be done by a single click in the Andriod Studio. Where you can see the some waring in it along with the solution that says convert to the stateful widget so just one click and we are now StatefulWidget from StatelessWidget.

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  int leftDiceValue = Random().nextInt(6) + 1;

  int rightDiceValue = Random().nextInt(6) + 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Image.asset('images/dice$leftDiceValue.png'),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Image.asset('images/dice$rightDiceValue.png'),
            ),
          ),
        ],
      ),
    );
  }
}

Once all this is done now let's make those images as a flat button so when clicked on that button we change the Dice's face.

FlatButton widget provides us with a button which is almost like anchor text of the web development. Now that I see it the FlatButton is updated to as TextButton widget.

A Material Design "Text Button".

Use text buttons on toolbars, in dialogues, or inline with other content but offset from that content with padding so that the button's presence is obvious. Text buttons do not have visible borders and must therefore rely on their position relative to other content for context. In dialogues and cards, they should be grouped together in one of the bottom corners. Avoid using text buttons where they would blend in with other content, for example in the middle of lists.

A text button is a labelled child displayed on a (zero elevation) Material widget. The label's Text and Icon widgets are displayed in the style's ButtonStyle.foregroundColor. The button reacts to touches by filling with the style's ButtonStyle.backgroundColor.

class _DicePageState extends State<DicePage> {
  int leftDiceValue = Random().nextInt(6) + 1;

  int rightDiceValue = Random().nextInt(6) + 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextButton(
                onPressed: () {},
                child: Image.asset('images/dice$leftDiceValue.png'),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextButton(
                onPressed: () {},
                child: Image.asset('images/dice$rightDiceValue.png'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Once we run the code we can see that the padding got increased which is due to TextButton also comes with its own padding of 16px so we'll remove our custom Padding which we added previously. (Remove widget is also easy job in Andriod Studion we need to click on the widget we want to remove then click on the context action there select remove the widget. 🙂)

Also TextButton comes with onPressed parameter which takes a callback that is called when the button is tapped or otherwise activated. To test the click let's just add a print statement which is be run when we click on the Dice image.

class _DicePageState extends State<DicePage> {
  int leftDiceValue = Random().nextInt(6) + 1;

  int rightDiceValue = Random().nextInt(6) + 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextButton(
              onPressed: () {print('Left Dice is clicked')},
              child: Image.asset('images/dice$leftDiceValue.png'),
            ),
          ),
          Expanded(
            child: TextButton(
              onPressed: () {print('Right Dice is clicked')},
              child: Image.asset('images/dice$rightDiceValue.png'),
            ),
          ),
        ],
      ),
    );
  }
}

So now when we click on the dice now we will see the print statements in our terminal now. Next, we'll make the click to change the dice face value.

For now, let's create a function which is to be called when we click on the dice. Upon calling the function changes the face value using the Random function which we previously used.

To show that there are some changes in the state of the widget we have to add the change face value code inside the setState() function which tell the StatefulWidget that there are some changes in the widget so we need to rebuild the app.
If we do not use the setState() function the changes will only be reflected only when we reload the app in future.

class _DicePageState extends State<DicePage> {
  int leftDiceValue = Random().nextInt(6) + 1;
  int rightDiceValue = Random().nextInt(6) + 1;

  void changeDiceFace() {
    setState(() {
      rightDiceValue = Random().nextInt(6) + 1;
      leftDiceValue = Random().nextInt(6) + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextButton(
              onPressed: () {
                changeDiceFace();
              },
              child: Image.asset('images/dice$leftDiceValue.png'),
            ),
          ),
          Expanded(
            child: TextButton(
              onPressed: () {
                changeDiceFace();
              },
              child: Image.asset('images/dice$rightDiceValue.png'),
            ),
          ),
        ],
      ),
    );
  }
}

We are updating both dice face on clicking any one of the dice or else if we want to roll dice one at a time we just need to make the changes depending on the on clicked dice. But then we just add the change in the onPressed parameter rather than making new method for it.

Now you finally have running dice game app which rolls the dice when you click on the dice. (Nothing fancy 😅) Hope you like it.

Also here is the Widget tree:

Summary and Challenges

By creating this app we have learned to use several new widgets and techniques can be used with flutter app development such as StatefulWidget which is used to build a dynamic app, Image widget used to display images in the app, an Expanded widget which is used to control the size of the images displayed, Text button which provide us with text as a button and many more concepts.

challenges we faced during the creation of this app was to make the images to change when we clicking the image which we handled using the StatefulWidget and Random function offered by Dart, Then we had image overflow issue which we solved using the Expanded widget. Displaying images side by side which was done by using the Row widget.

Thank You

If you have followed the blog and you also got your own running dice game app in your phone (Which is nothing fancy 😣) Congratulate yourself on achieving it. Also thanks from my side as well for reading the whole blogs as well. If you liked the blog leave like and leave a comment. Same goes for if you find any mistakes do let me know So that I can correct myself 😔.

You can use the same code for displaying the images with some tweaks here and there to make revolving image gallery or can add some scoring system to make the app more engaging or any ideas that are coming to mind as well.

Auf Wiedersehen👋

Let's Create Personal Info App Using Flutter

Coding Monkey — Sun, 27 Dec 2020 10:52:28 +0000

Heya All,

As I was following the Angela Yu course on Udemy to learn the Flutter I have created the Personal Info app which displays your image, name, email and phone number (Nothing fancy 😅). So I am just sharing my learnings in this blog.

Introduction

So In this blog, we are going to create an App which displays our hardcoded information such as Name, Image, Phone No and finally our email. Main Learning out of this blog is Use of widgets such as card, Row, Column, SizedBox and Text Style also the usage of assets in Flutter. which looks like this

Now let's get started with our code.



MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
        ),
      ),
    );

This would be over base setup with background colour as teal and with Use of SafeArea widget

Safe Area widget is used to prevent the content from going out of the screen. For example, this will indent the child by enough to avoid the status bar at the top of the screen.

And by backgroundColor we will be setting the background colour of the whole app to our required colour.

Since our background and Base widgets are set now let's add our profile image to the app.
As we now there most know ImageAsset to add an image to the app. But as per our requirement, we need avatar sort of image for profile image. so let's use a new widget called CircleAvatar which displays a circular profile image.

A circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background colour, for consistency.

So now our code will be like



MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
          ),
        ),
      ),
    );

Oh, right I forget to explain about the adding assets to flutter app. So to add any new custom images to our app we need to make a folder and store the images inside that folder(Since we are adding images so let's name the folder as images 😉). Next, we have to tell the flutter that the images are available in the images folder that can be done by adding the assets in pubsec.yml file.



name: my_card
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/

As you can see In the last 2 lines we are telling the flutter to take all the images inside the images folder. (Also be in mind that don't disrupt the indentation of 2 spaces otherwise you face an error when you click on pub get.

So as of now, our app looks like this.

So now let's add our Name and profession below our profile image by using the Text widget and also style it to look good.
While doing so we will require to use the Column widget to compile multiple widgets one above another as we want to display Profile image, Name and Profession in a column.

A widget that displays its children in a vertical array.
To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget.
The Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.



MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
              Text(
                'Game Monk',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                'Flutter Student',
                style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Source Sans Pro',
                    color: Colors.teal.shade100,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2.5),
              ),
            ],
          ),
        ),
      ),
    );

As you can see I have used different custom fonts for the Name and profession which are Pacifico and Source Sans Pro which are not available by default in Flutter. So let's add those fonts to our project. First, let's create a folder to store the tff file of the font we are going to use then let's add these lines to the end of the pubsec.yml file.
Along with it, you can see a new argument named mainAxisAlignment which helps us in aligning the content of the Column widget to the centre of the Screen.



fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

    - family: Source Sans Pro
      fonts:
        - asset: fonts/SourceSansPro-Regular.ttf

Now let's add the Contact info such as Email and Phone number. Here we are going to use 3 new widgets Icon, Card and ListTile.
Let's get into it At first since we are going to use Card format for displaying the contact info then we will be needing text styles such as shadow effect to the cards, padding margin between cards also rounded corners which makes it more appealing. Since all these styles are offered by the widget Card we'll use that to simplify our work.

A material design card: a panel with slightly rounded corners and an elevation shadow.
A card is a sheet of Material used to represent some related information, for example: an album, a geographical location, a meal, contact details, etc.

Next is ListStyle widgets which is used when we are displaying leading or trailing icon with some text, subtext etc.

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

Lastly Icon widget which provides the inbuilt icons to use for our app which are handier than using the images as icon.

A graphical icon widget drawn with a glyph from a font described in an IconData such as material's predefined IconDatas in Icons.



MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
              Text(
                'Game Monk',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                'Flutter Student',
                style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Source Sans Pro',
                    color: Colors.teal.shade100,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2.5),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.phone,
                    color: Colors.teal,
                  ),
                  title: Text(
                    '+91 1234 567890',
                    style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: 'Source Sans Pro',
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.email,
                    color: Colors.teal,
                  ),
                  title: Text(
                    'keertirajmalik@gmail.com',
                    style: TextStyle(
                        fontFamily: 'Source Sans Pro',
                        fontSize: 20.0,
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

So let's Just goes through the new code that is added now So we'll start with Card widget then inside that we'll add ListTile widget (To add widget inside widget we'll need child parameter which I didn't know till now 😔).
So as offered by the ListTile then leading parameter is used to tell the icon is leading then the text will be there.
So firstly we'll be adding phone number so using the Icon widget we'll display Phone icon then the colour of the icon displayed.
In title argument we'll add Text widget for displaying the phone number then using the TextStyle we'll provide the font-family which we have added using the asset.

So by now, we have mostly what we wanted to display at last we'll just add a horizontal line make some separation between Contact info and Name. Using the SizedBox widget we can add one light bar to separate contact info from others which add more aesthetic to the App.
So the final App looks like this:



MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
              Text(
                'Game Monk',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                'Flutter Student',
                style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Source Sans Pro',
                    color: Colors.teal.shade100,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2.5),
              ),
              SizedBox(
                width: 150.0,
                height: 20.0,
                child: Divider(
                  color: Colors.teal.shade100,
                ),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.phone,
                    color: Colors.teal,
                  ),
                  title: Text(
                    '+91 1234 567890',
                    style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: 'Source Sans Pro',
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.email,
                    color: Colors.teal,
                  ),
                  title: Text(
                    'keertirajmalik@gmail.com',
                    style: TextStyle(
                        fontFamily: 'Source Sans Pro',
                        fontSize: 20.0,
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

And our final app looks like this:

Late time edit: Here's the widget tree structure of the app we have created now

Thank You

If you followed through the whole blog with your custom changes you will be having your own Personal info app And you share the app instead of your Visiting card (Don't think anyone will be doing that 😂).

So once again if you find any mistakes in the blog please let me know so I can correct my mistakes if you like the blog leave like and comment 😎.

Au revoir 👋

Let's Talk about the MaterialApp Widget

Coding Monkey — Mon, 21 Dec 2020 18:00:57 +0000

Hey Readers 🙂,

I know it's been 6 days since the last blog. I got caught in the Procrastination purgatory so today I finally decided that I am gonna write a blog about something so picked the widget which we use in almost every application we create using the flutter that is MaterialApp. So let's get started...

Introduction of MaterialApp widget

we the MaterialApp widget in an application that uses material design.

A convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.

means that this widget is used to wrap multiple widgets which collectively used to build the UI which we required in material design. Let's analyse the MaterialApp constructor so we can get some insights on how this works.

const MaterialApp(
{
Widget? home,
Color? color,
ThemeData? theme,
ThemeData? darkTheme,
ThemeData? highContrastTheme,
ThemeData? highContrastDarkTheme,
ThemeMode? themeMode: ThemeMode.system,
bool debugShowMaterialGrid: false,
bool showPerformanceOverlay: false,
bool debugShowCheckedModeBanner: true,}
)

There are many more arguments inside the MaterialApp widget but I have only kept the arguments which I have used till now 😔.

At least one of home, routes, onGenerateRoute, or builder must be non-null. If only routes are given, it must include an entry for the Navigator.defaultRouteName (/), since that is the route used when the application is launched with an intent that specifies an otherwise unsupported route.
This class creates an instance of WidgetsApp.
The boolean arguments, routes, and navigatorObservers, must not be null.

Due to the named parameters feature of the Dart, we can only require the rest of the arguments will be set to their default values so we don't have to worry about them. (pretty cool huh 😎)

So the first one Widget home gives us the place to place all the widgets we are going to use for creating the UI of the app. we are going to place all the child widget inside this argument so this the center of the attraction of this widget.

the Color argument is used for The primary colour to use for the application in the operating system interface.

All the theme-related arguments are used for setting the theme to the app such as dark theme, high contrast theme etc. which controls the Default visual properties, like colours fonts and shapes, for the app's material widgets.

debugShowMaterialGrid displays the grid to which will helps us in setting the container values such as padding, margin etc. also helps in widgets placement when we are displaying them at the same time.

showPerformanceOverlay displays the apps performance overlay which helps in understanding the app's performance which is used when we are performing so performance-related debugging.

debugShowCheckedModeBanner which is used to display debug banner at the top left corner of the screen which is used mark the debug app to differentiate from the release app.

Example Time

So let's try some example since a single example helps us more than tons of explanations.

This example shows how to create a MaterialApp that disables the "debug" banner with a home route that will be displayed when the app is launched.

MaterialApp(
   home: Scaffold(
       appBar: AppBar(
           title: Text('Example'),
       ),
   ),
   debugShowCheckedModeBanner: false,
)

This code will result in sample app like this:

now let's try changing theme of the above app to dark theme.

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Example'),
        ),
      ),
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
 );

Thank You

I know it's a crude blog but I will update it later on as learn more about the options offered by this widget. 😔

Initially, I thought of writing about both MaterialApp and Scaffold but as I started to write about it I understood that I know nothing about it there are so many options offered from those to so only written about the MaterialApp widget 😣

Still, If you have completely read the blog thanks for that. As usual, if there are any mistakes or wrong information then do let me know in the comments so I can correct myself and repair the mistake 😁.

tot ziens 👋

Deploying the Flutter Documentation Website In Local

Coding Monkey — Wed, 16 Dec 2020 17:57:54 +0000

Hello Readers 👋,

As everyone hopes to set up the flutter documentation website locally so that we don't have to constantly need to go online to access the documentation whenever we need any information on any topics. So today's let's try to set up the documentation website locally.

Let's Setup the Prerequisites

Let's go to the Flutter/ Website GitHub repository provided by the Flutter Organisation which contains the source code for the documentation website which we are going to use for hosting our website.

Now let's check the readme.md file which got the information on how to set up the website locally.

These are the required tools. Install the following tools, if you don't have them already.

bash, the Bourne shell.
nvm, the Node Version Manager.
rvm, the Ruby Version Manager.
Flutter (You get Dart when you get Flutter. Confirm with which flutter and which dart.)
GNU diffutils version 3.6 or later.

$ brew install diffutils

These instructions assume you're using bash -- setup might not work if you use another shell. But just follow along, for now, I will mention the change in setup when we require.

Next main prerequisite is cloning the source code for the website

This repo has git submodules, which affects how you clone it.

Clone this repo and its submodule at the same, use the -recurse-submodules option:

$ git clone --recurse-submodules https://github.com/flutter/website.git

At any time during development you can use the git submodule command to refresh submodules:

  $ git pull
  $ git submodule update --init --remote

Run installation scripts

It is safe to (re-)run all of the commands and scripts are given below even if you already have the required packages installed.

Open a bash terminal/command window and execute the following commands:

1.After you have cloned this repo, change to the root of this repo:

  $ cd <PATH_TO_REPO>

2.Run the env-set.sh script to initialize environment variables, and to install/use required Node & Ruby version:

  $ source ./tool/env-set.sh

3.Run before-install.sh to install the core set of required tools:

  $ ./tool/before-install.sh

4.Run install.sh to install everything else needed to build this site:

  $ ./tool/install.sh

Any time you create a new terminal/command window to work on this repo, repeat steps 1 and 2 above.

Running Installation script for the ZSH shell

Above methods result in an error as

travis_fold command not found

So now let's follow another method which works for the ZSH shell.

1.After you have cloned this repo, change to the root of this repo:

  $ cd <PATH_TO_REPO>

2.Run the command npm install to install all the node packages required

  $ npm install

3.Run the command bundle install to install all the ruby packages required

  $ bundle install

Deploying the website locally

Now onto the final setup Deploying the website locally. For that, there are 2 ways

Using the npm
Using the bundle

First, let's deploy the website using the npm command

npm run start

This command will deploy the documentation website at http://localhost:5000

If we want to change the port number we have to open the tools/serve.sh file. And goto line 70.

(set -x; $SERVE --version; $SERVE --port ${SITE_LOCALHOST_PORT:-5000}) &

change the port value which is mentioned after the SITE_LOCALHOST_PORT:- To whatever port number you desire. (But there is one max limit for the port number do look out for that😉)

The second way of Deploying the website using the bundle command

$ bundle exec jekyll serve --incremental --watch --livereload --port 4002

As you can see we have mentioned the port as 4002 so the website will be deployed at

http://localhost:4002 . If we want to change the port we just have to change the number mentioned after the argument —port.

Thank You

So By now you also might have the documentation website running locally on your system. So let's congratulate ourselves for this 🥳. Now as usual If you find any mistakes do let me know about it I will make those changes. Thank you for reading the article/ blog (Still don't know the difference between the two) leave a like and comment if you find it useful.

In the next blog, I will write about the Scaffold widget in the flutter app by creating an example flutter app.

vale 👋

Dart Basic Overview

Coding Monkey — Tue, 15 Dec 2020 17:41:24 +0000

Hello All,

Let's go through some of the basic concepts of the Dart such as data types, OOP concepts etc.

So let's start introductions by printing the hello word using the Dart.

print('Hello World!');

Dart Introduction

Dart is an Object-oriented programming language developed by the Google. mainly used for creating the frontend user interface for the web and mobile apps in the flutter.

It's a compiled to native machine code (It's under active development). Dart is inspired by Java, JavaScript, C# (In my opinion the Dart almost feel like JavaScript) and it's Strongly-Typed.

Meaning of the Strongly typed is every value used in the Dart has a Type (Means value should be integer or text )

Data Types

The different types of data types in the Dart are

Number - Used of the for the number data type. It can be used for both numbers with or without decimal values ex: number GPA = 8.05 (My GPA of my BE 💁)

There are 2 types of the numbers in Dart
- int - Integer the number without decimal places. ex: int age = 21; (Which is my age 😉)
- double - double are the numbers with decimal places. ex: double height = 6.0 (My height in feet)
String - Used to store the text values. You can use both single or double quotes to mention the text. ex: String name = 'Game Monk' or String name = "Game Monk".
Object - Every value in the Dart is an object even an integer.

Variables and Functions

As you know if we want to process some information first we have to store those values somewhere first there comes the variables to our help. Variables got the name and store the values in them. ( You can consider them similar to a container).

var age = 21;

As you can see in the above code the age is the variable with name age and store the value 21 in it.

Now let's talk about the key work var which defines the type of the variable. variable can be of any type like integer, text or can be an object. The benefit of using the keyword var is that you can store any type of data unlike another keyword such as int which can only hold numbers without decimal values. But with the var you have to initialise it with a value as you can see in the code I have initialised it with value 21.

int age;
age = 21;

Another way we can store the value is to create variable without an initial value. but if we won't do this we explicitly have to mention the data type to be stored ( Means can't use var for this)

Another main feature of any programming language is Functions.

The function is a block of code which can be reused as many times required with having to write the same code repeatedly.

num addNumber(num n1, num n2) {
    // Due to use of num we can use this function for both int and double values.
    return n1 + n2;
}

var total = addNumber(1, 3); 
print(total) // Prints the value 4 
double totalvalue = addNumber(1.1, 3.3); 
print(totalValue) // Prints the value 4.4

The code of block contains the function addNumber which return the value after adding the number which we passed while calling the functions.

So the addNumber is the name of the function which we are going to use to call the function.

Also follow the convention of using the camelcase during naming the functions(Which is followed normally 😎) the keyword num is the return type of the function which tells about the function so the user can either store or process the returned value. num n1 and num n2 are the arguments which are passed during the function call to the pass some values to do the required the processing of information inside the function. arguments can be of any type or can be in any number. Also, the variables defined inside the functions remain inside the function through the concept called Scoping.

OOP concept in the Dart

Do you remember that Dart is an object-oriented programming language - that means that every value in Dart is an object. Even a simple number.

So what is Object?

Object are data structures. the object can be from simple data type such as int or double to a complex structure as a list of objects.

The object is created using the help of Classes because every object needs a blueprint based on which you can then create ("instantiate") it.

class Persom {
    var name = 'Max';
    var age = 30;

    void greet() {
        print('Hi, I am '+ name + ' and I am ' + age.toString() + ' years old!');
    }
}

So we define a class using the keyword class. Class contains two class-level variables called properties and the class-level function called Method.

The class only serves as a blueprint though! On its own, it does not give you an object! Instead, you can now create objects based on this class:

class Person {
    var name = 'Max';
    var age = 30;

    void greet() {
    print('Hi, I am ' + name + ' and I am ' + age.toString() + ' years old!';
    } 
}
void main() {
    var myself = Person();
    print(myself.name); // use the . to access class properties & methods
}

the main function is a special function in Dart - it's the function which Dart will execute first when your app starts.

As you can we can use the name and age variables inside the greet functions easily without any issues. But to use those values outside the class we need to follow some procedures for that:

Inside the main function, we create new object bases on the class Person by using the Person(). This process is called as Instantiating the class, by that we create an instance of Person. so we can use those properties using the . as you can see in the example we can use the name variable using the instantiated variable myself.name that way we can get the value stored inside the variable name in the class Person.

Thank You

Ok let's wrap it up here I will explain more of the OOP concepts in future blogs. Also, Thanks if you are still reading the blogs thanks for your time 🙏. As usual, If you find any mistakes please let me know through the comments so I can repair my mistakes 😅.

Let's Create Hello World App with Flutter

Coding Monkey — Wed, 09 Dec 2020 17:19:24 +0000

Hey Readers,

As the universal law of the programmers suggests every language learning should be started with printing the Hello World! 😎. Set let's build our hello world app which displays the hello world at the centre of the screen.

Code for Hello World app

So let's discuss our code for the hello world app. So at first, we are importing the package flutter/material.dart which provides us with the Material app widget which helps in printing the Text at the centre of the App.

import 'package:flutter/material.dart';

Next up we have the Main function which used for code execution that is when we run the code the this the main class which is going to run when we build the app.

import 'package:flutter/material.dart';

void main(){

}

Inside the main class, we have runApp function Inflate the given widget and attach it to the screen. This function applies all the widgets used is to the screen.

import 'package:flutter/material.dart';

void main(){
runApp();
}

MaterialApp is a convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality.

import 'package:flutter/material.dart';

void main(){
    runApp(MaterialApp(),
    );
}

inside the MaterialApp we have a property called home which is used to build the screen

if we want to show the text on the screen then we have to add the property as Text("Hello") to show that this is a string data type.

import 'package:flutter/material.dart';

//Main is the function which is run when run is performed
void main() {
  //Function is used to build the app
  runApp(
    MaterialApp(
      // Center widget used to center the text
      home: Text("Hello"),
    ),
  );
}

As you can we have finally got to display Hello world in Phone now let's try to display the text at the centre of the screen for that we have to use a property called Center inside the home.

import 'package:flutter/material.dart';

//Main is the function which is run when run is performed
void main() {
  //Function is used to build the app
  runApp(
    MaterialApp(
      // Center widget used to center the text
      home: Center(
        child: Text("Hello"),
      ),
    ),
  );
}

As we finally have the text in the centre of the screen so now we can say that we have started learning Flutter as we have done our ritual of printing the Hello World.

Code in a more elegant way

As you can see if we code like this which will be challenging to manage in future when more and more code gets added then now let's try to make it easier to read and maintain.

There is one more method to write the code which does the same work of printing the Hello World at the centre of the screen which is written in a more descriptive way.

import 'package:flutter/material.dart';

//Main is the function which is run when run is performed
void main() {
  //Function is used to build the app
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Text("hello"),
      ),
    );
  }
}

As you can see here now we moving all code written to the display the text at the centre of the screen is moved to another class called MainApp and instantiated inside the runApp method which going to be called when we build the app.

Inside the MainApp class, we have a method called build which returns the Widget type of data (Similar to int, double, String that we know). since we are returning some data then we definitely need a return statement which returns the widget type data.

So we are returning the MaterialApp widget with the properties which are used to print the text at the centre of the screen as you have seen in the previous code.

As the result, you see that this code is easier to read and understand compared to the code which we have previously written. So in future let's follow this format and write simple and elegant code

Thank You

Thank you all who made it to the end of the blog. If you found this blog somewhat useful, please leave a like or something, or if you found any mistakes then you should definitely leave a comment pointing the mistake I will definitely make those mistakes repaired so no one has to read any incorrect information.

안녕 🙏👋

Overview of Files and Folders Generated by Flutter

Coding Monkey — Tue, 08 Dec 2020 17:56:28 +0000

Hey all,

So In this blog, I am going to write about the files and folder in the flutter project. As you read in my previous blog that how we can generate the default app So there were some files and folders generated by default and were used to build the android and iOS app.

Folders in Flutter project

As you can see In the image when Build cache is generated on application run time when a temporary file automatically generated in .dart_tool folder, android folder and iOS folder.

Next, the .idea folder will be containing all setting related to the IntelliJ IDEA Android studio.

Android folder and ios folder are the folders exist to actually build an app on those respective platforms with the Dart files running on them. They also help you add permissions and platform-specific functionality to your project. When you run a Flutter project, it builds depending on which emulator or device it is running on, doing a Gradle or XCode build using the folders inside it.

In short, those folders are entire apps which set the stage for the Flutter code to run.

lib folder will be containing all the dart files realter to our flutter project and we will be mostly working in this folder.

test folder will be having the test methods written for the testing the application which we'll help to check for the errors and bugs after any changes are done to the code.

Files in Flutter project

As you can see Inside the Android folder we will be having several folder and files related to the building the android app. since it will mainly be generated and maintained by the Flutter we can leave it as it is.

Same goes for the iOS folder all code which helps in building the iOS app is stored inside the iOS folder. 😎

next inside lib folder we can see that there is a main. dart dart file which contains all the code we have written for our app will be available in this file.

In the test folder, we have widget_test.dart file we will be writing all the code which is used for the testing purpose of all code we will be writing for the app.

next up we have .gitignore file as we are going to use the git for the version control system then we will be required to exclude some files from the VCS so we will be mentioning those file names or extensions to exclude those files from the VCS.

next .packages files will be having all the path of the packages used in the flutter app. (Don't' know much about it now update it later once I get more knowledge on this 😅)

Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems. This allows quickly building an app without having to develop everything from scratch. so the pubspec. yaml file will be containing the records of all the dependencies used for the flutter project.

related to the pubspec. yaml the pubspec.lock file will be having Regenerating the pubspec.lock file lets you test your package against the latest compatible versions of its dependencies. For application packages, Saving pubspec.lock ensures that everyone working on the app uses the same versions.

Thank You

So this is the short note on what are the files and folders used in the flutter app. Thanks for reading this blog. Recently one reader has pointed out to me that I have been writing Android as Android So in future if there are any mistakes do let me know I will make those changes happen so I may be providing some wrong information to other who may be reading this blog. So Please let me know if there are any mistakes it will be helpful for me and others also.

Прощай 🙏 👋

Creating and Running the Flutter Test App

Coding Monkey — Tue, 08 Dec 2020 04:51:54 +0000

Hi, Readers 👋 ,

So In this blog, I will be writing about creating the test app( Which can be created by Default no coding required 💁). Also, I will try to run that app in my Android phone and for iOS, we'll be using the Emulator (Can't afford to buy an iPhone 😔).

Creating Test Flutter App

So let's start the process. So there are 2 ways to create new Flutter project One through the terminal using the flutter commands. The second one will be using the Android studio.

flutter create <Project name>
flutter run

flutter create test_app                                                                                                                                                       
Creating project test_app...
  test_app/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  test_app/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  test_app/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  test_app/ios/Runner/Info.plist (created)
  test_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
  test_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png (created)
  test_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  test_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json (created)
  test_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png (created)
  test_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png (created)
  test_app/ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  test_app/ios/Runner/Base.lproj/Main.storyboard (created)
  test_app/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata (created)
  test_app/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  test_app/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  test_app/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  test_app/ios/Flutter/Debug.xcconfig (created)
  test_app/ios/Flutter/Release.xcconfig (created)
  test_app/ios/Flutter/AppFrameworkInfo.plist (created)
  test_app/ios/.gitignore (created)
  test_app/test/widget_test.dart (created)
  test_app/test_app.iml (created)
  test_app/.gitignore (created)
  test_app/.metadata (created)
  test_app/android/app/src/profile/AndroidManifest.xml (created)
  test_app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  test_app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  test_app/android/app/src/main/res/drawable/launch_background.xml (created)
  test_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  test_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  test_app/android/app/src/main/res/values/styles.xml (created)
  test_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  test_app/android/app/src/main/AndroidManifest.xml (created)
  test_app/android/app/src/debug/AndroidManifest.xml (created)
  test_app/android/gradle/wrapper/gradle-wrapper.properties (created)
  test_app/android/gradle.properties (created)
  test_app/android/.gitignore (created)
  test_app/android/settings.gradle (created)
  test_app/android/app/build.gradle (created)
  test_app/android/app/src/main/kotlin/com/example/test_app/MainActivity.kt (created)
  test_app/android/build.gradle (created)
  test_app/android/test_app_android.iml (created)
  test_app/pubspec.yaml (created)
  test_app/README.md (created)
  test_app/ios/Runner/Runner-Bridging-Header.h (created)
  test_app/ios/Runner/AppDelegate.swift (created)
  test_app/ios/Runner.xcodeproj/project.pbxproj (created)
  test_app/lib/main.dart (created)
  test_app/.idea/runConfigurations/main_dart.xml (created)
  test_app/.idea/libraries/Dart_SDK.xml (created)
  test_app/.idea/libraries/KotlinJavaRuntime.xml (created)
  test_app/.idea/modules.xml (created)
  test_app/.idea/workspace.xml (created)
Running "flutter pub get" in test_app...                           14.9s
Wrote 71 files.

All done!
[✓] Flutter: is fully installed. (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H15 darwin-x64, locale en-IN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 12.2)
[✓] Android Studio: is fully installed. (version 4.0)
[!] IntelliJ IDEA Ultimate Edition: is partially installed; more components are available. (version 2020.2.4)
[✓] VS Code: is fully installed. (version 1.49.0)
[✓] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd test_app
  $ flutter run

Your application code is in test_app/lib/main.dart.

As you can see the whole process is so faster it got completed in less than 30s 😳.
also as you see the flutter create command also run the flutter doctor command to check for the issue if there any we will prompt then only.

flutter create command will create a default app in the directory and flutter run install the app in the device connected.

Another method we'll be using the Android studio as IDE for the process. As the prerequisite, we have already installed the Flutter plugin in the Android studio. So we'll skip ahead of that 😎.

Let's open the Android studio so we'll be prompted with Welcome page with the option to create Android project or Flutter project so we'll be picking the Create new Flutter project option (I know it's obvious 😅).

Next, we will be prompted to select Flutter options as such as create a new app, new plugin or new Package. As we are creating a new app we will pick the New Application option. (again the obvious thing 😅)

Next provide the configuration options for the flutter project such as Project name, SDK path and Project location. Set those options depending on your setup.Also select Install SDK… if the text field is blank.

Next, we'll be setting up the package name we'll leave it as it is Click on Finish button.

Once you click finish button it will take some time to create a new project and the new project will be created once loading completes.

Running the Test App

If you want to run the install and run the app using the terminal which is a whole lot faster then we just have to connect a device or start a simulator to run a device to use the app.

flutter run                                                                                                                                                          
Launching lib/main.dart on iPhone 12 Pro Max in debug mode...

Running Xcode build...
 └─Compiling, linking and signing...                        10.8s
Xcode build done.                                           26.1s
Waiting for iPhone 12 Pro Max to report its views...                 4ms
Syncing files to device iPhone 12 Pro Max...                       425ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone 12 Pro Max is available at: http://127.0.0.1:52504/m9UpOKl9zB0=/


Application finished.

Once this process is completed in the device application will be installed and opened in debug mode. But if we have multiple devices connected then we will get the options like this.

flutter run                                                                                                                                             
Multiple devices found:
sdk gphone x86 (mobile)    • emulator-5554                        • android-x86 • Android 11 (API 30) (emulator)
iPhone 12 Pro Max (mobile) • 8645B626-112E-4171-ABD3-CFA076EAD027 • ios         • com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)
[0]: sdk gphone x86 (emulator-5554)
[1]: iPhone 12 Pro Max (8645B626-112E-4171-ABD3-CFA076EAD027)
Please choose one (To quit, press "q/Q"):

Depending on your choice the application will be installed on the chosen device. So for this let's try installing it on the Android device.

Using hardware rendering with device sdk gphone x86. If you notice graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on sdk gphone x86 in debug mode...
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        32.2s
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...                 1.0s
Waiting for sdk gphone x86 to report its views...                    7ms
Syncing files to device sdk gphone x86...                          216ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on sdk gphone x86 is available at: http://127.0.0.1:53493/qg61OJBnuII=/

Once this process is completed then the app will be installed inside the android device.

Now let's see how to do the same with using the Android studio.😉

As you can see we have several options at the top bar so we'll discuss the options available. From the left side first, we have the navigation path of the Page opened in the editor next we have Devices connected. Even after connecting the android device, you may not see the Device in connected device for the device to get listed first we have to Activate Developer Mode and USB debugging options in the phone then the devices will be displayed in connected devices (As you can see I have connected my Android device to run the app).
Next, we have Config selector which is configuration setup for the application (I don't have much info on it as of now I will add more once I learn about it 😣)

Next is the Run button upon clicking the but the app will get installed in the device and opens the app in the device.

Next, is the Debug button which is same as the Run button but the app will be opened in debug mode which will help us in Debugging the error in the app.

Next, We have Hot reload button ( Lightning icon one ⚡️) which will be used to implement changes as soon as there are some changes made to the codebase.

Well, these are the important options available. Rest we'll go through when we will be using those buttons.

So let's run the app inside the iPhone 12 Pro Max (Obviously using the simulator already told you can't afford iPhone 😣). So just start the simulator using the Xcode and set the device as iPhone 12 Pro Max(since I have opened it in the simulator) then click on the Run button then the rest will be taken care off by Android studio it will install the app in the device and open that app in debug mode (For the first run it will take time for me it was around 90 secs it may differ). ( As of now android is not working for me I will continue once that start working)

The app will look like this and the only function offered by the app will be when the user clicks on the plus sign it will increase the count displayed in the centre.

Now let's check how can we run the app inside the android phone. So I have just downloaded the Pixel 2 phone inside Android Virtual Device Manager with Android Q OS.

Next, let's run the app in the virtual device. Pick the virtual device as a target device to run the app which will take quite a long time for the first time ( For it was more than 10 mins not sure why though 🧐).

Thank you

If you are reading till here you might get the same results then the work is done let's congratulate our selves over our work done. If you like this blog or it helped you in anyway then I will consider the work well done. Again quite a long blog with more than 13 min read 😅 not sure anyone is going to read the whole blog still I will thank him if he decides to read the whole blog.😎

If you are able to complete the above process then consider you are ready to start with the flutter app development. In the next blog, I will write about the folders and file generated and required for the flutter app.

अलविदा 🙏