Home Blog Page 48

Swipe Refresh Layout – Android Pull down to refresh widget

0
Swipe Refresh Layout
Swipe Refresh Layout

Hi Guys, welcome to Proto Coders Point  In this Android Tutorial we will implement an Swipe Down Refresh Layout with helps app user to simple pull down to refresh for new Contents

You might have be using many android application those have added the pull to refresh android UI that helps to reload or refresh the feed contents. Loading new content get refreshed when user swipe the view downwords to load the data. Here when user pull down a small loader icon will be shown at the top of the screen and get disappears when contents get loaded completly.

Swipe Refresh Layout – Android Pull Down to Refresh Library

Finally, Google released an official version of the pull-to-refresh library! It is called SwipeRefreshLayout.

This Library is very useful and easy to use where user can easily swipe down or pull down to refresh for new data or contents in the Views.

the official documentation is here:

let’s directly start implementing this library in our android project.

Final Result

pull down to load refresh contents
pull down to load refresh contents

Step 1 will be offcourse Creating new project or working with existing android project

Step 2 : Add Dependencies

To user Swipe Refresh Layout you need to add one required depencencies under gradle Script

Open build.gradle( App level ) and add the below depencencie.

dependencies {
    -----------------
     -----------------
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0' // add this line
}

As android support libraries have deprecated and is been replaced by AndroidX, you can find the latest library  here.

Step 3 : open activity_main.xml file to add SwipeRefreshLayout

Now open activity_main.xml file where you need to add the xml code for Swipe Refresh  widget

Snippet code of the Refresh Layout

 <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="546dp">


        // any View 

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Add the below code in xml file

activity_main.xml

Copy paste below code in activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="546dp">


        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
           />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    <TextView
        android:id="@+id/textshow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textStyle="bold"
        android:textSize="25sp"
        android:text="Pull Down to Refresh"
        android:gravity="center"/>



</LinearLayout>

In the above lines of xml code we have SwipeRefreshLayout as a parent which is a pull to refresh the layout, in this i have a ListView where all the data will be displayed in list form, you can use any Views in it.

Step 4 : Create a new XML Layout

Then you need an XML file with TextView in it, so that we can display text in listview.

Create a new XML file under res>layout and name it as listview_text.xml

listview_text.xml

<?xml version="1.0" encoding="utf-8"?>
<!--  Single List Item Design -->

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:textSize="16dip"
    android:textStyle="bold" >
</TextView>

Step 5 : Add a listener to Swipe Refresh layout – a pull down to refresh class.

Here is a snippet code to add a listener.

Swipe RefreshLayout pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);

       pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
           @Override
           public void onRefresh() {
               Data_Function(); // your function call code

           }
       });

This setOnRefreshListener will get called whenever a user swipe down

Copy paste the below lines of code in main class or where you are using this widget.

main_activity.java

package com.ui.swiperefreshlayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    SwipeRefreshLayout pullToRefresh;
  
    ListView listView;

    String[] mobileArray = {"Android","IPhone","WindowsMobile","Blackberry",
            "WebOS","Ubuntu","Windows7","Max OS X"}; //list of data to show in list view

    ArrayAdapter adapter;

    Handler handler; // handler to show data after some seconds

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        adapter = new ArrayAdapter<String>(this,R.layout.listview_text,mobileArray);
       
        listView = (ListView) findViewById(R.id.listView);
        handler = new Handler();

        pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);

        pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                Data_Function(); // your code

            }
        });
    }

    public  void Data_Function()
    {
      
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                
                listView.setAdapter(adapter);

                pullToRefresh.setRefreshing(false); // swipe Refresh layout is disabled after first refreshed
            }
        },3000);
    }
}

In the above java code i have

List of array : That holds String values ( Operating System Names )

ArrayAdopter : that holds list of array and an textview layout using which we can set the adoptor to listView.

Handler : To show the data in ListView after some seconds

Flutter Share Plugin with Complete Source Code Example

1
flutter share plugin with example
flutter share plugin with example

Hi Guys, Welcome to Proto Coders Point In this Flutter Tutorial we will look into flutter share plugin with example.

What is Flutter Share plugin?

In Flutter share plugin is very useful when user want’s to sharing contents from flutter app to any of his friends via the platform share dialog box.

This plugin is wraped with ACTION_VIEW INTENT as in android and UIActivityViewController as on iOS devices.

whenever the flutter app user wants to share any contents he can just click on share button which simply pop-up a share dialog using which he/she can easily share contents.

Let’s begin implementing Flutter share Plugin library

Flutter Share Plugin with Example

Step 1 : Add dependencies

To make user of this plugin you need to add share plugin depencencies under project pubspec.yaml file

On right side you will see your Flutter project,

your project name > pubspec.yaml

dependencies:
  share: ^0.6.3+5 //add this line

The Version here given may get update so please visit official site here

Step 2 : Import share.dart package

Once you have add the dependencies file, to make use of this share plugin you need to import package share.dart in any dart file where you need to use this flutter plugin.

import 'package:share/share.dart';

Step 3 : Invoke share plugin method where ever required

To invoke or show a share dialog box in Android or iOS device all you need to do is just invoke share method like this :

Share.share('check out my website https://example.com');

This share method also takes an (optional) subject property that can be used when sharing through email

Share.share('check out my website https://example.com', subject: 'Look what I made!');

Flutter Share Plugin with Complete Source Code Example

main.dart file

Just copy paste below flutter source code under main.dart file

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Share Intent"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text(
              "Example on Share Plugin Flutter",
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 25.0),
            ),
          ),
          SizedBox(
            height: 25,
          ),
          Center(
            child: MaterialButton(
              elevation: 5.0,
              height: 50.0,
              minWidth: 150,
              color: Colors.blueAccent,
              textColor: Colors.white,
              child: Icon(Icons.share),
              onPressed: () {
                Share.share(
                    'check out my website https://protocoderspoint.com/');
              },
            ),
          ),
          SizedBox(
            height: 25.0,
          ),
          Center(
            child: Text(
              "Share with Subject  works only while sharing on email",
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15.0),
            ),
          ),
          Center(
            child: MaterialButton(
              elevation: 5.0,
              height: 50.0,
              minWidth: 150,
              color: Colors.green,
              textColor: Colors.white,
              child: Icon(Icons.share),
              onPressed: () {
                Share.share(
                    'check out my website https://protocoderspoint.com/',
                    subject: 'Sharing on Email');
              },
            ),
          ),
        ],
      ),
    );
  }
}

Result :

UI Design 

flutter share plugin
UI Design

pop-up of share platform dialog box

flutter share plugin dialog on android device

When user clicks on blue share button and select any messenger to share contents

Flutter share on whatsapp

Then when user choice to share on Email

flutter share on email

Flutter Photo View widget with zoomable image gallery

2
Flutter Photo View widget with zoomable image gallery
Flutter Photo View widget with zoomable image gallery

Hi Guys, welcome to proto coders point In this Flutter Tutorial will see above flutter photo view package library widget.

Flutter Photo View widget with zoomable image gallery

Photo View widget in flutter is a simple zoomable image or any content widget in flutter application development.

Using PhotoView widget on any widget view enable the widget images to become able to add zoom effect and a pan with user gestures such a rotate,pinch and drag gestures.

It also can show any widget instead of an image, such as Container, Text or a SVG.

This image viewer widget is super simple to use and play, Flutter zoom photo view widget is extremely customizable through the various options it provide and easy  controllers.

For more details visit official site HERE

Let’s begin implementing this flutter widget in our project

Step 1:  Create new Flutter project

Create a new Flutter Project in android-studio or any other Framework or open your existing flutter project

File > New > New Flutter project

Once your project is ready remove all the default dart code from main.dart file

and just copy paste the below code in main.dart

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo View + Zoomable widget"),
      ),
      // your body code here
    );
  }
}

Step 2:  Add Dependencies

Then, you need to add dependencies in your project

open pubspec.yaml file and under dependencies line add below

dependencies:
  photo_view: ^0.9.1

Step 3: import the photo view widget package

Once you have added photo_view dependencies in your project now you can use those packages into your project by just importing photo_view.dart library

import 'package:photo_view/photo_view.dart';

on the top of main.dart file  add this import statement.

This allows you to make user of flutter zoomable image photoViewer library in main.dart file

Step 4: Create a folder(assets) and add path to asset folder in pubspec.yaml file

You need to create a assets folder and assign the path to be able to access images under assets folder.

Right click ( project ) > New > Directory

Name it as assets  and then add some images under that folder.

creating image directory in flutter app
creating image directory in flutter app

After you add images in assets folder open pubspec.yaml file to assign access path to assets folder for your project, So that your project can easily use that folder.

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
  - assets/
  # add the above assets exactly below users-material-----

Then, now the project is ready to make use of Flutter PhotoView zoomable image widget

Zoom image  flutter basic code base

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo View + Zoomable widget"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
          child: PhotoView(
        imageProvider: AssetImage("assets/nightwolf.jpeg"),
      )),
    );
  }
}

The above code will result you with:

flutter image zoom gallery example

Photo View Gallery

If you want to show more that 1 image in a form of slidable image gallery then you need to user PhotoViewGallery.dart package

import 'package:photo_view/photo_view_gallery.dart';

Copy paste the below code to  in main.dart file

Flutter photoview gallery example

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final imageList = [
    'assets/nightwolf.jpeg',
    'assets/lakeview.jpeg',
    'assets/redsundet.jpeg',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo View + Zoomable widget"),
      ),
      // add this body tag with container and photoview widget
      body: PhotoViewGallery.builder(
        itemCount: imageList.length,
        builder: (context, index) {
          return PhotoViewGalleryPageOptions(
            imageProvider: AssetImage(imageList[index]),
            minScale: PhotoViewComputedScale.contained * 0.8,
            maxScale: PhotoViewComputedScale.covered * 2,
          );
        },
        scrollPhysics: BouncingScrollPhysics(),
        backgroundDecoration: BoxDecoration(
          color: Theme.of(context).canvasColor,
        ),
        loadingChild: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

Result : 

flutter image gallery photo viewConclusion

In the Flutter Tutorial we learned how can we display an image or photo with customizable, rotatable image, and zoomable image in flutter using the PHOTO VIEW LIBRARY.

The Flutter PhotoView Gallery is one of the best way to show a zoomable image in flutter application.

 

Flutter Slidable ListView Actions on ListTiles

1
Flutter Slidable ListView Action on ListTiles
Flutter Slidable ListView Action on ListTiles

Hi Guys, Welcome to Proto Coders Point In this Flutter Tutorial we will implement Flutter Slidable action on ListView with ListTile widget.

Flutter Slidable Widget

A Flutter Slidable Widget can be applied on Flutter ListView with ListTile widget that can help developer to give left or right directional slide actions with we create a beautiful User Interface and User Experience where user this Slidable widget to dismiss any listTile he don’t want to user.

Eg: you might have used gmail mobile app which makes user of Slidable listTile where you can easily slide left or right on the email you recieved where you can take different actions like delete the mail, or mark it as important and many more actions

let’s begin implementing Flutter Slidable in our project

Adding this package in our project

To add this slidable package into our project you need to

Add this to your package’s pubspec.yaml file:

dependencies:
  flutter_slidable: ^0.5.4  // version might vary

Note : the verison might vary by time so just go to official site to get latest version of this library.

once you add the dependencies in pubspec.yaml file just click on Packages get, and then required package is been added into our flutter project.

Importing package

As you added the dependencies all the required packages will be added to your project.

All you need to do is just import the package dart file where every it’s requited.

import 'package:flutter_slidable/flutter_slidable.dart';

Snippet code of Flutter Slidable

Slidable(
  actionPane: SlidableDrawerActionPane(),
  actionExtentRatio: 0.25,
  child: Container(
    color: Colors.white,
    child: ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.indigoAccent,
        child: Text('$3'),
        foregroundColor: Colors.white,
      ),
      title: Text('Tile n°$3'),
      subtitle: Text('SlidableDrawerDelegate'),
    ),
  ),
  actions: <Widget>[
    IconSlideAction(
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () => _showSnackBar('Archive'),
    ),
    IconSlideAction(
      caption: 'Share',
      color: Colors.indigo,
      icon: Icons.share,
      onTap: () => _showSnackBar('Share'),
    ),
  ],
  secondaryActions: <Widget>[
    IconSlideAction(
      caption: 'More',
      color: Colors.black45,
      icon: Icons.more_horiz,
      onTap: () => _showSnackBar('More'),
    ),
    IconSlideAction(
      caption: 'Delete',
      color: Colors.red,
      icon: Icons.delete,
      onTap: () => _showSnackBar('Delete'),
    ),
  ],
);

Built-in slide actions

This package comes with 2 kinds of slide actions:

  • SlideAction, which is the most flexible. You can choose a background color, or any decoration, and it takes any widget as a child.
  • IconSlideAction, which requires an icon. It can have a background color and a caption below the icon.

In this Flutter Tutorial we are making use of IconSlideAction, so that we can easily add some icons with background color and some caption to it.

Built-in action panes

Action panes is required  to add the slidable listView ListTile

This package comes with 4 kinds of action panes:

  • SlidableBehindActionPane : The slide actions stay behind the item while it’s sliding
  • SlidableScrollActionPane : The slide actions follow the item while it’s sliding
  • SlidableDrawerActionPane : The slide actions animate like drawers while the item is sliding
  • SlidableStrechActionPane : The slide actions stretch while the item is sliding

Complete Code on Flutter Slidable with ListView.builder  with ListTile

In the Below Code i have created a list of Strings that range from 0 – 9 (i.e 10 list items)

final List<String> items =
        new List<String>.generate(10, (i) => "item  ${i + 1}");

Then, In the body part we have ListView Builder that simple returns Slidable widget.

This Sliable widget have  4 other properties those are:

actionPane : This is mandatory to be included there are 4 build-In actionPane ( check out able )

actionPane: SlidableDrawerActionPane()

action :  This is primary action that show when listView is slided from left side.

actions: <Widget>[
  IconSlideAction(
    icon: Icons.more,
    caption: 'MORE',
    color: Colors.blue,
  ),
],

secondaryAction : As the slidable property say it an secondary action that show when  listView is slided from right side.

Finally, the child : which can be any widget, in this flutter slidable tutorial i have added ListTile as a child.

Below is the Complete Code base just copy paste it in main.dart file

main.dart 

ListView builder ( without any divider color )

without listview seperator divider
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final List<String> items =
        new List<String>.generate(10, (i) => "item  ${i + 1}");
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Slideable Example"),
      ),
      body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, int index) {
            return Slidable(
              actions: <Widget>[
                IconSlideAction(
                  icon: Icons.more,
                  caption: 'MORE',
                  color: Colors.blue,
                  //not defined closeOnTap so list will get closed when clicked
                  onTap: () {
                          print("More ${items[index]} is Clicked");
                  }
                ),
              ],
              secondaryActions: <Widget>[
                IconSlideAction(
                  icon: Icons.clear,
                  color: Colors.red,
                  caption: 'Cancel',
                  closeOnTap: false, //list will not close on tap
                  onTap: () {
                      print("More ${items[index]} is Clicked");
                   }
                )
              ],
              child: ListTile(
                leading: Icon(Icons.message),
                title: Text("${items[index]}"),
                subtitle: Text("Slide left or right"),
                trailing: Icon(Icons.arrow_back),
              ),
              actionPane: SlidableDrawerActionPane(),
            );
          }),
    );
  }
}

ListView Seperated ( with Divider )

How to add a seperator or divider in flutter ListView ?

separatorBuilder: (context, index) => Divider(
              color: Colors.black,
            ),

Complete Code with ListView Seperated

listview seperated divider
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final List<String> items =
        new List<String>.generate(10, (i) => "item  ${i + 1}");
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Slideable Example"),
      ),
      body: ListView.separated(
          separatorBuilder: (context, index) => Divider(
                color: Colors.black,
              ),
          itemCount: items.length,
          itemBuilder: (context, int index) {
            return Slidable(
              actions: <Widget>[
                IconSlideAction(
                  icon: Icons.more,
                  caption: 'MORE',
                  color: Colors.blue,
                  onTap: () {
                         print("More ${items[index]} is Clicked");
                  }
                ),
              ],
              secondaryActions: <Widget>[
                IconSlideAction(
                  icon: Icons.clear,
                  color: Colors.red,
                  caption: 'Cancel',
                  onTap: () {
                           print("Cancel ${items[index]} is Clicked");
                       }
                )
              ],
              child: ListTile(
                leading: Icon(Icons.message),
                title: Text("${items[index]}"),
                subtitle: Text("Slide left or right"),
                trailing: Icon(Icons.arrow_back),
              ),
              actionPane: SlidableDrawerActionPane(),
            );
          }),
    );
  }
}

Learn more about Flutter slidable widget on official site

Recommended Articles

listwheelscrollview3D ListView in flutter

Flutter Image Slider

Mobile Application Development in 2020

2
Mobile Application Development in 2020
Mobile Application Development in 2020

Hi Guys, welcome to Proto Coders Point. This article will be learning all about the Future of Mobile Application Development in 2020.

What is Mobile Application Development ?

Basically a Mobile Application Development is a process of designing a Beautiful UI Mobile app for mobile Devices, In the Process of developing a mobile application a developer will pre-install on his mobile as a part of testing process to test all the modules. During this process any mobile app developer must consider a different screen size , hardware specofication and he should also need to the app in different version of mobile OS.

Mobile Application Development has been steadily growing in couple of years and this mobile application industry is generating lot of revenues and also creating best software development job for graduate.

mobile app developer

Benefits of Mobile App Development?

In modern days mobile technology has been boosted, now a days mobile application is blended with all the business operation and also build opportunity to boost sales in market.

Mobile Technology is been used to send notification to their customer about the new products that is be launched, we can also use online coupons for discounts offers.

smartphone user

Now a days SmartPhones are been used all most every where in this earth and mobile usage is been increasing day by day.

Platform for mobile Applocation Development in 2020

  • Front-end development tools
  • Back-end servers
  • Security add-on layers
  • System Software
  • Mobile app testing

Front-end development tools

In Front End Developement all the focus will be on creating a best user interface and also user experience (UI-UX Designing), that makes users of the application attracted to the app.

Front-end development

Back-end Servers

The Back-End is a place where all the server side code get executed, that receives a request from a client(user) for some data, then the server sends back the requested data to the client(user), In back-end it also include the database where all the data will be stored.

back end servers

Security add-on layers

In every field their must be a security layers where users data will be hidden from out-side world, this Create safety for the application user.

  • App wrapping for security
  • Data encryption
  • Client actions
  • Reporting and statistics

Mobile Testing

In mobile testing the developed app is been tested in different version of OS, and even the app is been tested using VPN to change the current location and check if data is been transmited properly to our targated location.

mobile app testing process

  • Google Android Emulator – The Developer makes use of Google Emulator which is basically runs on android OS.
  • Testing mobile Device –  The app developer can also test the application in his own testing mobile device.

Most Commonly used Tools in mobile Application Development

Here are some commonly used tools in market today in 2020

Android – Studio :

Before, In android application development we where making use of java as programming language but now Google came with it’s own android development language called Kotlin.

In android Development we make use of IDE (Integrated Development Envirnoment) tools called Android-Studio.

Download link is here

android studio IDE

Android uses Dalvik ( discontinued process virtual Machine ) to execute application written for android OS. Therefore android application can only run on android devices.

The best thing for developer is that android-studio is completly free to use and develop best android application.

Unity Game Engine

Unity is a cross- platform application development mostly know as game engine which is developed by Unity Technology.

It was first released in JUNE 2005 at Apple Inc.

The Unity editor is supported on all the OS such as windows and maxOS.

This Unity Engine is more powerful for building games for more then 25 different platforms including mobile, desktop, consoles, and virtual reality.

Programming language used in unity game development are C#, JavaScript, Boo, other .NET-based languages

Unity Game Engine

This tools free for beginners for low level Game application development but to development high end games you need to buy commercial development licenses.

Flutter Application Development

The Flutter is a cross platform development framework introduced by Google, Flutter Application is done using Dart programming language – dart language is very simple language for any developer who knows basic of java development.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

flutter text icon

To develop an app using Flutter you need make use of an IDE ( either android-studio, xCode , IntelliJ IDEA )

here is a artitcle on how to install flutter in android-studio ?

List Of Top Best Mobile App Development Companies India

mobile app development companies

  1. Konstant Infosolutions
  2. Openxcell
  3. Hidden Brains InfoTech
  4. MacAppStudio
  5. SourceBits
  6. IndiaNIC InfoTech
  7. Appinventiv

Navigation Side Drawer in Flutter with Example

0
Flutter Navigation Drawer With Example
Flutter Navigation Drawer With Example

Hi Guys Welcome to Proto Coders Point, In this Flutter Tutorial we gonna Talk about Flutter Navigation Drawer which is basically a Flutter Slide Menu.

In Flutter Application Development Navigation Drawer are basically used with the Scaffold.drawer Property, where Scaffold must have an appBar to show Drawer opening icon, The Drawer child usually is a ListView which first child is a DrawerHeader that are normally used to show current logIn user data.

The Remaining Drawer children are often been filled using ListTiles.

let’s Start implementing Flutter Navigation drawer Slide menu into our project

Flutter Navigation Drawer with Example

Step 1 : Create a new Flutter Project

offCourse you need to create a new Flutter project or open you existing Flutter project all left to your choice

File > New  > New Flutter Project

Fill all the required details to create  a new project.

Step 2 : Create 3 new Dart files in your flutter project

To create new dart file under your project,

Your_project > lib > (right click) New > Dart File

Then in lib directory you need to create 3 Dart Files and name it as ProfilePage.dart , Setting Page.dart , DrawerCode.dart.

Step 3 : Add a Scaffold Widget with appBar widget and drawer widget in main.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigation Drawer"),
      ),
      drawer: DrawerCode(),
    );
  }
}

add a Scaffold widget with a appBar and drawer property in it.

Here DrawerCode is an class that has drawer widget in it.

The complete code of main.dart file is below just copy paste it in main page.

main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigation Drawer"),
      ),
      drawer: DrawerCode(), // this is drawerCode page
    );
  }
}

Step 4 : Adding Required widget in Navigation Drawer Code

Snippet Code

Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("Drawer"),
          ),
        ],
      ),

The above Snippet code is for explaination about Flutter Drawer

In Flutter Drawer their must be a child widget i.e ListView.

Then this listView that can have any numbers of children : <Widget>, Here in above snippet code i gave Flutter DrawerHeader widget that will aquire some space in the top of Drawer with some decoration to it, the DrawerHeader in turn has a child which are be any widget here  have just for simple added a Text Widget.

Then the Second widget will be  a ListTiles here is the Snippet code for that.

ListTile(
           leading: Icon(Icons.person_outline),
           title: Text("Profile"),
           onTap: () {
             Navigator.pop(context);
             Navigator.push(
                 context, MaterialPageRoute(builder: (context) => Profile()));
           },
         ),

ListTile widget has a leading property with Icon as an Widget you can set a icon to the flutter Drawer, title property as a Text , and an onTap method property that will handle all the  task when user clicks on the ListTile.

The Complete Code is below just create a DrawerCode.dart file and copy paste the below lines of Flutter Drawer Code.

DrawerCode.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_drawer/ProfilePage.dart';
import 'package:flutter_drawer/SettingPage.dart';

class DrawerCode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Column(
              children: <Widget>[
                Flexible(
                  child: Container(
                    width: 100,
                    height: 100,
                    margin: EdgeInsets.only(bottom: 5),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://secure.gravatar.com/avatar/3a719607819fc579c2aafd4d21dad3d1?s=96&d=mm&r=g'),
                          fit: BoxFit.fill),
                    ),
                  ),
                ),
                Text(
                  "Rajat Palankar",
                  style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.w500,
                      color: Colors.white),
                ),
                Text(
                  "https://protocoderspoint.com/",
                  style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.w500,
                      color: Colors.white70),
                ),
              ],
            ),
          ),
          ListTile(
            leading: Icon(Icons.person_outline),
            title: Text("Profile"),
            onTap: () {
              Navigator.pop(context);
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => Profile()));
            },
          ),
          ListTile(
            leading: Icon(Icons.settings_applications),
            title: Text("Setting"),
            onTap: () {
              Navigator.pop(context);
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => Setting()));
              print("Go to Settings");
            },
          ),
          ListTile(
            leading: Icon(Icons.arrow_back),
            title: Text("Logout"),
            onTap: () {
              print("Logout Users");
              Navigator.pop(context);
              SystemNavigator.pop();
            },
          ),
        ],
      ),
    );
  }
}

Step 5 : adding codes for Navigated Drawer pages

Both the below pages will simply show a Text Widget indicating which page is been open.

ProfilePage.dart

When user Tap on menus listTitles from Navigation drawer the user will navigate to the selected option.

import 'package:flutter/material.dart';
import 'package:flutter_drawer/DrawerCode.dart';

class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator Drawer"),
      ),
      drawer: DrawerCode(),
      body: Center(
        child: Text("Profile Page"),  // this is profile page
      ),
    );
  }
}

SettingPage.dart

import 'package:flutter/material.dart';

import 'DrawerCode.dart';

class Setting extends StatefulWidget {
  @override
  _SettingState createState() => _SettingState();
}

class _SettingState extends State<Setting> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator Drawer"),
      ),
      drawer: DrawerCode(),
      body: Center(
        child: Text("Setting Page"), // Then here is setting page
      ),
    );
  }
}

All set, Now your Flutter Project with Navigation Drawer is ready to test and use.