Home Blog Page 98

Android Alert Dialog Box with a list of Options

0
Adding a list of options in Alert Dialog in android tsudio
Adding a list of options in Alert Dialog in android tsudio

Working Demo

Custom Alert Dialog with list of options.

An AlertDialog is a Simplest way to get response from a user by providing them a option to select .This post will show you how can we add a list of choices to our AlertDialog box in android.

If you check official documentation that have describe that, their are total three kinds of lists that can be used with an AlertDialog in android :

  1. Traditional single-choice list
  2. Persistent single-choice list (radio buttons)
  3. Persistent multiple-choice list (checkboxes)

In this Tutorial i will give demo on all 3 kinds of alert dialog choice list

Basic to build a Alert Dialog Box

// setup the alert builder

 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose an Option");

Manually Create a Array list to display on a alert dialog

// add a list
        String[] options = {"Option1", "Option2", "Option3", "Option4", "Option3"};

Create a dialog box and show to user on action

// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();

Traditional single-choice Android alert Dialog list.

Traditional Android Alert Dialog list options
Traditional Alert Dialog list options

The way to make use of a traditional single-choice list is to use setItems method.

Call the Below Function on button Click

 public void TraditionallistDialog()
    {
        // setup the alert builder

        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose an Option");

        // add a list

        String[] options = {"Option1", "Option2", "Option3", "Option4", "Option3"};

        //Pass the array list in Alert dialog
        builder.setItems(options, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                switch (which) {
                    case 0: // Select option task
                    case 1: // Config it as you need here
                    case 2:
                    case 3:
                    case 4:
                }
            }
        });
// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

In Traditional list their is no need to set any positive button, as user select any list from alert dialog list the item will automatically gets selected and alert dialog get closed.

Radio button single-choice Android alert Dialog list.

Radio button alert dialog list options
Radio button alert dialog list options

The Best advantage of the radio button list over a Simple traditional list is that the user will be able to check which is the default selected option in the list where as in Traditional list their is no default option.

The way to make a radio button list is to use setSingleChoiceItems.

Call the below code on button Click.

public  void radiolistDialog()
    {
        // setup the alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose a Option");
// add a radio button list
        final String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        int checkedItem = 1; // cow
        builder.setSingleChoiceItems(selectedoption, checkedItem, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user checked an item
                Toast.makeText(MainActivity.this,"selected option: "+selectedoption[which],Toast.LENGTH_LONG).show();
                //here 'which' is the position selected
            }
        });
// add OK and Cancel buttons
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user clicked OK
            }
        });
        builder.setNegativeButton("Cancel", null);
// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

In Radiobutton list we can implement 2 kinds of buttons in alert dialog box i.e setPositiveButton() and setNegativeButton() with different actions.

Checkbox list choice Android alert Dialog list.

setMultiChoiceItems alert dialog list
setMultiChoiceItems alert dialog list

Here in Checkbox list alert dialog list user can select multiple option from the given options.

The way to make a checkbox list is to use setMultiChoiceItems.

public void checkboxlistDialog()
    {
        // setup the alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose some Options ");
        // add a checkbox list
        String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        final boolean[] checkedItems = {true, false, false, false, false};
        builder.setMultiChoiceItems(selectedoption, checkedItems, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked) {
                // user checked or unchecked a box


            }
        });
// add OK and Cancel buttons
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user clicked OK
            }
        });
        builder.setNegativeButton("Cancel", null);
// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

Complete Source Code android Alert Dialog with list of options

activitymain.xml for UI Design

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alert Dialog box with List "
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.07" />

    <Button
        android:id="@+id/listdialog1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:text="Simple list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/radiolist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        android:text="Radio button list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listdialog1" />

    <Button
        android:id="@+id/checkboxlist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="Checkbox list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radiolist" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package protocoderspoint.com.customalertdialog;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button simplelist,radiolist,checkboxlist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        simplelist=(Button)findViewById(R.id.listdialog1);
        radiolist=(Button)findViewById(R.id.radiolist);
        checkboxlist=(Button)findViewById(R.id.checkboxlist);
     simplelist.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                simplelistDialog();
            }
        });

     radiolist.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
             radiolistDialog();
         }
     });

     checkboxlist.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
             checkboxlistDialog();
         }
     });
    }

    public void simplelistDialog()
    {
        // setup the alert builder

        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose an Option");

        // add a list

        String[] options = {"Option1", "Option2", "Option3", "Option4", "Option3"};

        //Pass the array list in Alert dialog
        builder.setItems(options, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                switch (which) {
                    case 0: // Select option task
                    case 1: // Config it as you need here
                    case 2:
                    case 3:
                    case 4:
                }
            }
        });
// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

    public  void radiolistDialog()
    {
        // setup the alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose a Option");
// add a radio button list
        final String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        int checkedItem = 1; // cow
        builder.setSingleChoiceItems(selectedoption, checkedItem, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user checked an item
                Toast.makeText(MainActivity.this,"selected option: "+selectedoption[which],Toast.LENGTH_LONG).show();
                //here 'which' is the position selected
            }
        });
// add OK and Cancel buttons
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user clicked OK
            }
        });
        builder.setNegativeButton("Cancel", null);
// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

   public void checkboxlistDialog()
    {
        // setup the alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose some Options ");
        // add a checkbox list
        String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        final boolean[] checkedItems = {true, false, false, false, false};
        builder.setMultiChoiceItems(selectedoption, checkedItems, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked) {
                // user checked or unchecked a box


            }
        });
// add OK and Cancel buttons
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user clicked OK
            }
        });
        builder.setNegativeButton("Cancel", null);
// create and show the alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }
}

Recommended Android post

Android custom alert dialog

scan qr code android studio using zbar / zxing library

2
QR code scanner source code android studio
QR code scanner source code android studio

In This post as you know we are learning how to implement a scan qr code in android android studio where we are making use of zbar or zxing any of this you can user as both of them are similar.

I am making use of zbar library scan qr code android-studio.

Introduction on QR Code

Each and Every barcode contains unique identity number format which are used to represents the product id based. Using this qr code scanner app, you will be able to find out that id from the barcode/qr code by scanning it.

In the end of this tutorial, our Android app will be able to scan both Barcode as well as QRCode.

qr scanner app for android-studio full source code.

Create a new project in Android Studio.

When you are creating a new qr code project, select empty activity as a default activity in android-studio.

File>new Project > select Empty Activity >Give a Project Name 
creating android studio new project

Add dependencies in build.gradle(Module:app) file

Add the following dependency to your build.gradle (Module : app) file.

implementation 'me.dm7.barcodescanner:zbar:1.9.13'

Here i am using ZBar github library , but you can also use ZXing.

Add camera permission to your AndroidManifest.xml file:

You need to add camera permission between <manifest>….</manifest> tag in androidManifest.xml file .

<uses-permission android:name="android.permission.CAMERA" />

For using camera, we have to get permission from the user device.

Note: If you are targeting SDK version above 22 (Above Lollipop)  then you need to ask a user for granting runtime permissions.

Updating activity_main.xml file:

Designing a user Interface here i have made use of one button and a text view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="QR Code Scanner"
        android:gravity="center"
        android:textSize="25sp"
        />
    

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn"
        android:text="Scan Barcode or QR code" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tvresult"
        android:textColor="#000"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Result will be here"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="For more programming tutorial keep visiting"
        />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="www.protocoderspoint.com"
        android:textColor="#039BE5"
        />
</LinearLayout>

Here Button will open a new activity with camara for scanning a bar code or QR code a and After successful scanning, system will enter the value of the barcode or QR code in the textview.

Updating MainActivity.java file:

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
 
    public static TextView tvresult;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        tvresult = (TextView) findViewById(R.id.tvresult);
 
        Button btn = (Button) findViewById(R.id.btn);
 
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, ScanActivity.class);
                startActivity(intent);
            }
        });
 
    }
}

In the above MainActivity.java code we have to initialize a textview and button.

On Button click we are loading a new scanActivity.java code using Intent method. In short Here we will open ScanActivity on the button click.

Opening new activity ScanActivity.java in android studio

Now go to File->New->Activity->Empty Activity and give name of activity as ScanActivity.

Add below code to ScanActivity.java

package protocoderspoint.com.qrcodescannerapp;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import me.dm7.barcodescanner.zbar.ZBarScannerView;

public class ScanActivity extends AppCompatActivity implements ZBarScannerView.ResultHandler {
    private ZBarScannerView mScannerView;

    //camera permission is needed.

    @Override
    public void onCreate(Bundle state) {
        super.onCreate(state);
        mScannerView = new ZBarScannerView(this);    // Programmatically initialize the scanner view
        setContentView(mScannerView);                // Set the scanner view as the content view
    }

    @Override
    public void onResume() {
        super.onResume();
        mScannerView.setResultHandler(this); // Register ourselves as a handler for scan results.
        mScannerView.startCamera();          // Start camera on resume
    }

    @Override
    public void onPause() {
        super.onPause();
        mScannerView.stopCamera();           // Stop camera on pause
    }

    @Override
    public void handleResult(me.dm7.barcodescanner.zbar.Result result) {
        // Do something with the result here
        Log.v("Result 1", result.getContents()); // Prints scan results
        Log.v("Result 2", result.getBarcodeFormat().getName()); // Prints the scan format (qrcode, pdf417 etc.)
        MainActivity.tvresult.setText(result.getContents());
        onBackPressed();

        // If you would like to resume scanning, call this method below:
        //mScannerView.resumeCameraPreview(this);
    }
}

Here is Brief Description on ScanActivity.java

  • In onCreate() method, we have set view as scannerview instead of xml file layout Because we are using Zbar QR Code Library.
  • In onResume() method, we have set the resulthandler and started camera preview.
  • In onPause() method, we are stopping camera preview.

Explaining handleResult() method of Zbar and zxing QR Code scanner

@Override
    public void handleResult(me.dm7.barcodescanner.zbar.Result result) {
        // Do something with the result here
        Log.v("kkkk", result.getContents()); // Prints scan results
        Log.v("uuuu", result.getBarcodeFormat().getName()); // Prints the scan format (qrcode, pdf417 etc.)
 
        MainActivity.tvresult.setText(result.getContents());
        onBackPressed();
 
        // If you would like to resume scanning, call this method below:
        //mScannerView.resumeCameraPreview(this);
    }
  • As you can see in above code, we get result object which contains Data of Barcode or QRcode after scanning is completed.
  • We will get the final result by running result.getContents() method. This method returns the value of barcode in text format.
  • we have set this barcode text into TextView of MainActivity.
  • onBackPressed() method will return the user to the Main Activity.

So This Tutorial was all about scan barcode and QRcode programmatically in android studio example. Thank you 

QR code reader/scanner android source code download

Download a Complete QR coder scanner Source code

Download from Drive

Or Refer official Github Zbar / Zxing QR code scanner Library’s

Download from GitHub

Adding a flutter bottom navigation bar in android studio

3
flutter bottom navigation bar tutorial
flutter bottom navigation bar tutorial

How to use the Flutter Bottom Navigation Bar in Flutter using android studio tuturial.

In this Post we’re going to be adding Flutter’s Bottom Navigation Bar to an app. Here i am making use of android-studio to write flutter codes. 

if you don’t know what acutally / how Bottom Navigation bar looks like in Flutter I’m referring to just look at the picture pasted below.

flutter bottom Navigation bar
This is how we are going to build an flutter app with has bottom Navigation bar.

Instead, you’re switching out a over all group of content within a single page to give the appearance that the page is changing.Here is a illustration to visually describe what we’re doing. Not that the overall “scaffolding”, as Flutter calls it, stays the same and the contents within the page change.

Device Screen with bottom navigation bar in flutter with 3 navigation tabs as shown.

Create a Flutter Project.

So Let’s begin with Creating a new Flutter project for Bottom Navigation bar Implementation .

I am making Use of android studio to write my flutter code.

File >New > New Flutter Project 

First We need to start by changing the MyApp widget in main.dart to be a Stateful widget. We need to do this because we will be storing which tab the user is currently on within our state.

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

and a class that extends State<MyApp> some thing like this.

class MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
        return yourAppData
    }
}

After you’ve done that you need to, create the BottomNavigationBar inside the Scaffold widget. It might seem to be little confusing for beginner learner of flutter but no need to worry the complete will given below in the end of this post.

bottomNavigationBar: BottomNavigationBar(
    items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('Categories'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
        ),
    ],
),

Next, You need to add the onTap property to the BottomNavigationBar widget before items in above code.

currentIndex: selectedPage,
          onTap: (int index) {
            setState(() {
              selectedPage = index;
            });
          },

Then, set the currentIndex property of the BottomNavigationBar widget to a variable.

currentIndex: selectedPage,

Now create an integer variable with the same name you set in currentIndex . Set this at the top of the state.

int selectedPage = 0;

Last, create anlist of array variable that holds all the widgets that will be loaded depending on which bottom navigation bar button the user taps on (note the order here matters and should be the same as the buttons).

final _pageOptions = [
    Home(),
    Work(),
    Landpage()
  ];

All codes together looks something like this.

The Complete Flutter bottom Navigation Bar Tutorial.

main.dart

import 'package:flutter/material.dart';
import './Home.dart';
import './Work.dart';
import './Landpage.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  int selectedPage = 0;
  final _pageOptions = [Home(), Work(), Landpage()];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Bottom Navigation Bar"),
        ),
        body: _pageOptions[selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: selectedPage,
          onTap: (int index) {
            setState(() {
              selectedPage = index;
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(
                icon: Icon(Icons.work), title: Text('Work')),
            BottomNavigationBarItem(
                icon: Icon(Icons.landscape), title: Text('Landscape'))
          ],
        ),
      ),
    );
  }
}

Create a new page and name it as Work.dart in lib directory of you project

Work.dart

import 'package:flutter/material.dart';

class Work extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(25.0),
      child: Text(
        'Work Page ',
        style: TextStyle(fontSize: 36.0),
      ),
    );
  }
}

likewise code 2 more pages in same lib directory

Home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(25.0),
      child: Text(
        'Home Page',
        style: TextStyle(fontSize: 36.0),
      ),
    );
  }
}

Landscape.dart

import 'package:flutter/material.dart';

class Landpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(25.0),
      child: Text(
        'Land Page',
        style: TextStyle(fontSize: 36.0),
      ),
    );
  }
}

VIDEO TUTORIAL

Install flutter plugin android studio – flutter hello world

9
install flutter plugin in android studio and run your first hello world program
install flutter plugin in android studio and run your first hello world program

If your are new in flutter app development, then you are in the right place to learn more about flutter and build your own First Flutter App which simply display a Text ” HELLO WORLD ” in your mobile screen.

Installing Flutter SDK in your PC

Installing and running Flutter couldn’t have been more straightforward. The official docs will get you through that. Once you’re done you can run the following command to make sure you’re all set.

Hope you have set all the requirement properly else you can learn how to install flutter and set environment variable PATH. Flutter SDK PATH Set.

Check if the flutter plugin is been installed or you need to install flutter plugin in android studio. Follow below steps in android studio.

Installing Flutter Plugin in android studio

File > Settings

After navigating to settings in android studio will you get a pop-up window.

Adding Flutter Plugin in android-studio
Adding Flutter Plugin in android-studio

In pop-up settings window select a option called Plugin and search in the search box “Flutter” and install the plugin as shown in the above highlighted image.

Creating flutter project in android studio.

File > New > New Flutter Project
creating new flutter project in android studio

Select an “Application” when Building for end Users.

first flutter app hello world program in android studio
my first flutter hello world program in android studio

Give a name to you project “Flutter_first_hello_world”.

Choice a Flutter SDK path, select the project location and click the next Button.

Set a Unique Package Name for the project, this describes a Unique Name for your First Flutter App project.

Once the project is created, it should have the following structure:

Flutter default coder with Increment counter on button click

Creating a First Flutter App Hello World

Creating a Hello World app will require working with only 1 file: main.dart

First of ALL DELETE all the Default Codes from main.dart file. This will give you a error in you project dashboard i.e test folder, you need to Delete the entire test folder.

Copy the Below line of code in main.dart

First Flutter App in Android Studio

import 'package:flutter/material.dart';

void main() => runApp(new FirstFlutterApp());

class FirstFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Material(
        child: new Center(
          child: new Text("Hello world! my first flutter app example program"),
        ),
      ),
    );
  }
}

Let’s go through this code step by step.

import 'package:flutter/material.dart';

In Flutter almost everything is a widget, widgets are the building blocks of Flutter apps, and luckily a variety of widgets are offered by Flutter:

Buttons, input fields, lists, tables, dialogs, tab bars, card views, … You name it!. In the Above import we’re importing the library material.dart containing a rich set of material widgets that implement the material design guidelines.

void main() => runApp(new FirstFlutterApp());

The main function is the entry point to the app. Same a main in C Program language.

StatelessWidget

class FirstFlutterApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        ...
    }
}

A statelesswidget is one that has no internal state, think of an image or a text field. This type of widget must implement the build() method.

In our Flutter first hello world app we have .

  • MaterialApp (a material design widgets wrapper), 
  • Material (a piece of “material”), 
  • Center (a widget that centers elements inside it)
  • Text (text field widget) few widget offered by flutter.

Each widget has a set of attributes (some mandatory, others optional) that describe composition (home, child, children), visual aspects (decoration, position, styling) and behavior(on click listener). As you spend more time building with Flutter, you’ll get to experiment with more widgets and you’ll run into more use cases where you’ll need to implement other attributes.

Running your First Flutter App in android Studio

running first flutter app in android studio
click on run button or press Shift +F10

finally App will run in you mobile device as shown below

first flutter hello world program example
first flutter hello world program example

Recommended Flutter article

How to install Flutter in ubuntu 20.04

How to Install Flutter in ubuntu 20.04

2
how to install flutter in ubuntu 20.04
how to install flutter in ubuntu 20.04

Hi Guys, Welcome to Proto Coders Point. In this Article we’ll learn How to install flutter in ubuntu 20.04.

Install Flutter in Ubuntu 20.04/ Linux

System Requirement to Install Flutter in ubuntu

To install and run Flutter on ubuntu, your development system environment must meet these minimum requirements:

  • Operating Systems: Linux (64-bit)
  • Disk Space: 600 MB (does not include disk space for IDE/tools).
  • Tools: Flutter depends on these command-line tools being available in your environment.
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • xz-utils

Download flutter SDK for Linux/ubuntu

Flutter_Linux_Ubuntu_v1.9.1+hotfix.4-stable.tar.xz

After Downloading flutter dart sdk from above gived button, Change your current directory using cd command where the flutter_linux_stable.tar.xz is located ( May be in Downloads Directory )

cd Downloads

After Download Complete Extract the flutter_linux_stable.tar.xz file in you selected directory using below command.

tar xf ~/Downloads/flutter_linux_v1.9.1+hotfix.4-stable.tar.xz

Add the flutter tool to your path:

 export PATH="$PATH:`pwd`/flutter/bin"

Note: Above command will sets your PATH variable for the current terminal window only. Means when you you close the terminal you no longer will be able to use flutter, to use again you need to user again and again export PATH ( above command ).

To permanently add Flutter to your path, see Update your path.

Add Flutter to environment variable in Ubuntu

Now you can add the flutter binaries to your PATH, either by running this in your terminal:

export PATH="$PATH:`pwd`/flutter/bin"

But this comment will temporary add flutter binaries in PATH variable, you can permanently add it to the configuration file of your shell permanently.

Depending on which shell you use either ~/.bashrc for bash~/.zshrc for zsh , these will typically be:

bash your can proceed steps to add flutter binaries in PATH variable

open the hidden file ~/.bashrc using command:

gedit ~/.bashrc
how to open .bashrc file for editing
open ~/.bashrc

A gedit will pop up with a window like below. just scroll down still you reach at the bottom and paste the below code.

export PATH="$PATH:/home/$USER/flutter/bin"

Adding export PATH in .bashrc file – add flutter to path ubuntu

add flutter to path ubuntu
Add this line at the bottom of .bashrc file to set flutter bin environment

You can reload your config by running:

source ~/.bashrc

Now close the current terminal or restart the terminal.

How to check if flutter is correctly installed in the system.

flutter doctor
flutter doctor
flutter doctor

Installing Flutter Plugin in android studio

Check out this post installing flutter SDK + android studio with Flutter plugin 

 

 

Android Welcome Screen Github Library

2
Android welcone screen github library
Android welcone screen github library

Hi Guys, Welcome to Proto Coders Point, here I found out a best Android Welcome Screen Github Library. That help use to integrate a customizable app intro screen in Android apps.

Android Welcome Screen Github Library

Features

  • Fully customizable.
  • RTL support ( Right to Left Support ).
  • Ability to use built in layouts or custom fragments.
  • Built in layouts support all screen sizes and orientations.

One time Intro Welcome Screen for new app user

What is a welcome screen in app?

App welcome screen is a one time screen that is been used to introduce your app to your customer, so that the user can understand your company and how to your the app. its just a introduction screen for first time app user.

Adding Welcome Screen Library to your project

To make use of this awesome intro screen android library you need to first add welcome screen github library into your android project.

Add this dependencies in Gradle Script of module level : app

implementation 'com.stephentuso:welcome:1.4.1'
add dependencies android welcome screen github library

If you use proguard, add the following to your proguard rules.

-keepclassmembers class * extends com.stephentuso.welcome.WelcomeActivity {
    public static java.lang.String welcomeKey();
}

Basic Usage to add welcome screen android library

To make use of this welcome screen android library you need to create a class that extend WelcomeActivity like this.

Just in your android project > java folder create a new class my any name “myWelcomeScreen” that should extend WelcomeActivity that came from the library we have added above.

package protocoderspoint.com.welcomescreen;

import com.stephentuso.welcome.BasicPage;
import com.stephentuso.welcome.TitlePage;
import com.stephentuso.welcome.WelcomeActivity;
import com.stephentuso.welcome.WelcomeConfiguration;

public class MyWelcomeScreen extends WelcomeActivity {
    @Override
    protected WelcomeConfiguration configuration() {
        return new WelcomeConfiguration.Builder(this)
                .defaultBackgroundColor(R.color.background)
                .page(new TitlePage(R.drawable.logo1,
                        "Title")
                )
                .page(new BasicPage(R.drawable.logo3,
                        "Header",
                        "More text.")
                        .background(R.color.colorAccent)
                )
                .page(new BasicPage(R.drawable.logo3,
                        "Lorem ipsum",
                        "dolor sit amet.")
                )
                .swipeToDismiss(true)
                .build();
    }
}

Then your need to implement one @Override method called WelcomeConfiguration configuration() and add n numbers of welcome screen you need.

You do not need to override onCreate or call setContentView.

Note: For now, defaultBackgroundColor() needs to be called before adding pages.

Add MyWelcomeScreen Activity in AndroidManifest.xml File

 <activity android:name=".MyWelcomeScreen"
            android:theme="@style/WelcomeScreenTheme"/>

Show the welcome screen Library.

Welcome screens are started with WelcomeHelperonSaveInstanceState is needed to be sure only one instance of the welcome screen is started. Add the following to the Activity you want to show the welcome screen before (probably your launcher activity):

MainActivity.java

package protocoderspoint.com.welcomescreen;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import com.stephentuso.welcome.WelcomeHelper;

public class MainActivity extends AppCompatActivity {

    WelcomeHelper welcomeScreen;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        welcomeScreen = new WelcomeHelper(this, MyWelcomeScreen.class);
        welcomeScreen.show(savedInstanceState);

    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        welcomeScreen.onSaveInstanceState(outState);
    }
}

Download Project

Download from Drive Download from Github