Flutter Data Table — A flutter widget of the week

By

-

December 30, 2019

Welcome to Proto Coders Point, In this Flutter Tutorial we will implement Flutter Widget of the week i.e DataTable Flutter.

If you have some Important data to be shown to the user of flutter app,Then Flutter DataTable Will Help you to do that in tabular form.

Flutter Data Table — A flutter widget of the week

The DataColumn, which describes a column in the data table.
DataRow, which contains the data for a row in the data table.
DataCell, which contains the data for a single cell in the data table.
PaginatedDataTable, which shows part of the data in a data table and provides controls for paging through the remainder of the data.

Simple DataTable in flutter

Here is an snippit code to display simple DataTable in Flutter

DataTable(
           columns: [
             DataColumn(
                 label: Text(
               "USN",
               style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w900),
             )),
             DataColumn(
                 label: Text(
               "Name",
               style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w900),
             )),
             DataColumn(
                 label: Text(
               "Marks",
               style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w900),
             )),
             DataColumn(
                 label: Text(
               "Percentage",
               style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w900),
             )),
           ],
           rows: [
             DataRow(cells: [
               DataCell(Text("1")),
               DataCell(Text("Pavan")),
               DataCell(Text("99")),
               DataCell(Text("99%")),
             ]),
             DataRow(cells: [
               DataCell(Text("2")),
               DataCell(Text("Suraj")),
               DataCell(Text("85")),
               DataCell(Text("87%")),
             ]),
             DataRow(cells: [
               DataCell(Text("3")),
               DataCell(Text("Rajat")),
               DataCell(Text("89")),
               DataCell(Text("89%")),
             ]),
             DataRow(cells: [
               DataCell(Text("4")),
               DataCell(Text("Sanjay")),
               DataCell(Text("75")),
               DataCell(Text("80%")),
             ]),
           ],
         ),

In the above snippet code i have displayed Student data such as student USN, Name, Marks, Percentage.

Here is the Output of above code

You can make any DataColumn as numerically bu just adding a line numeric: true which will show all the number data from right side of the DataColumn.

Eg:

DataColumn(
            label: Text(
            "Percentage",
            style:
            TextStyle(fontSize: 12.0, fontWeight: FontWeight.w900),
           ),
numeric: true),

DataColumn numeric true — See the difference

As You see that Percentage Column has started displaying data from right side of DataColumn.

Show which Row is selected

You can show and default row as selected by setting selected attribute to true

DataRow(cells: [
                DataCell(Text("1")),
                DataCell(Text("Pavan")),
                DataCell(Text("99")),
                DataCell(Text("99%")),
              ], selected: true),

Here in above snippet code i have make DataRow 1 as Selected by default.

You can show a DataRow cell is editable or and gave a placeHolder

And the Important Every think in flutteer is an Widget so Feel Free to add any Widget in Flutter DataTable.

tooktip: used to show details of any column

When you long press on any DataTable you will a text pop up showing the use of that data or column.

tooltip:"Your message",

Complete Code of Flutter DataTable Widget

This is the complete Code of Flutter Data Table Widget. You can Just Copy Paste the Code in main.dart file of you Flutter Project.

main.dart

import 'package:flutter/material.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: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter DataTable"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SingleChildScrollView(
            child: DataTable(
              sortAscending: true,
              sortColumnIndex: 0,
              columns: [
                DataColumn(
                    label: Text(
                      "USN",
                      style: TextStyle(
                          fontSize: 12.0, fontWeight: FontWeight.w900),
                    ),
                    tooltip: "Student USN Number"),
                DataColumn(
                    label: Text(
                  "Name",
                  style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w900),
                )),
                DataColumn(
                    label: Text(
                      "Marks",
                      style: TextStyle(
                          fontSize: 12.0, fontWeight: FontWeight.w900),
                    ),
                    numeric: true),
                DataColumn(
                    label: Text(
                      "Percentage",
                      style: TextStyle(
                          fontSize: 12.0, fontWeight: FontWeight.w900),
                    ),
                    numeric: true),
              ],
              rows: [
                DataRow(
                  cells: [
                    DataCell(Text("1"), showEditIcon: true),
                    DataCell(Text("Pavan")),
                    DataCell(Text("99")),
                    DataCell(Text("99%")),
                  ],
                  selected: true,
                ),
                DataRow(cells: [
                  DataCell(Text("2")),
                  DataCell(Text("Suraj"), showEditIcon: true),
                  DataCell(Text("85")),
                  DataCell(Text("87%")),
                ]),
                DataRow(cells: [
                  DataCell(Text("3")),
                  DataCell(Text("Rajat")),
                  DataCell(Text("Fill Marks"), placeholder: true),
                  DataCell(Text("89%")),
                ]),
                DataRow(cells: [
                  DataCell(Text("4")),
                  DataCell(Text("Sanjay")),
                  DataCell(Text("75")),
                  DataCell(Text("80%")),
                ]),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

How to parse json data in flutter dart programming

By

Rajat Palankar

-

December 29, 2019

2

Hi Guys, Welcome to Proto Coders Point In this Tutorial we will learn how to parse json data in dart ( flutter ) language.

Before that if you are new in json and want to learn basic of json read this.

What is JSON Data ?

JSON stands for JAVASCRIPT OBJECT NOTATION , it’s an lightweight formated data for storing and transporting data very fast, JSON data are often used when data is to be sent from server to any application. Json is very easy for human being to read as it stored in text format.

refer in detail from below websites:

wikipedia : https://en.wikipedia.org/wiki/JSON

w3schools : https://www.w3schools.com/whatis/whatis_json.asp

JSON in dart ( Flutter )

Dart language has a built-in support for parsing json data.

You can easily convert json data into String using dart:convert library and map it with key: value parse, where keys are string and value are of dynamic objects.

import 'dart:convert';

You need to import dart:convert to convert json data.

Direct Json Parsing and How to use the data

var jsonData = '{ "name" : "ProtoCodersPoint", "website" : "protocoderspoint.com"  }'; //simple json data

var parsedJson = json.decode(jsonData); // need to import convert library

print('${parsedJson.runtimeType} : $parsedJson'); //Display full json Parse

print(parsedJson['name']); //fetch value using key 'name'

print(parsedJson['website']); // fetch value using key 'website'

Then, after Executing the above code you will get output like:

Ok So you can play with the json data using its key index, as you can see i m printing the data using it’s key in above lines of code.

Output

_InternalLinkedHashMap<String, dynamic> : {name: ProtoCodersPoint, website: protocoderspoint.com}
 ProtoCodersPoint
 protocoderspoint.com

JSON Parser using Object Class

Then, Instead of using json Parser directly, it’s better to pass the json data to a class that handles your data from you. This can be done using a constructor in flutter dart.

class UserData {
  String name;
  String website;

  UserData(Map<String, dynamic> data) {
    name = data['name'];
    website = data['website'];
  }
}

Here I have defined an external class that will handle out json parser data, I have made use of Map which has datatypes as Map<String,dynamic>.

 var jsonData = '{ "name" : "Welcome", "website" : "protocoderspoint.com"  }'; //simple json data

 var parsedJson = json.decode(jsonData); // need to import convert library

 UserData userData = UserData(parsedJson); // creating an object and passed parsed JSON data

 print("${userData.name}  Keep learning from ${userData.website}");

Here i have parsed Json data using json.decode and then Created a class object names userData and passed parsed json data to class constructor.

Complete Code of parsing json data in flutter dart programming

Create a Flutter project in android-studio and copy paste the below lines of parse json in flutter code main.dart file

main.dart

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

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

String Welcome = "";
String website = " ";

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var jsonData =
        '{ "name" : "Welcome", "website" : "protocoderspoint.com"  }'; //simple json data

    var parsedJson = json.decode(jsonData); // need to import convert library

    UserData userData = UserData(parsedJson);

    Welcome = userData.name;

    website = userData.website;

    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("JSON PARSE DEMO"),
      ),
      body: Center(
        child: Text("${Welcome} keep Learning from ${website}"),
      ),
    );
  }
}

class UserData {
  String name;
  String website;

  UserData(Map<String, dynamic> data) {
    name = data['name'];
    website = data['website'];
  }
}

Output

Recommended Articles

Android Tutorial on Volley library – How to Fetching JSON Data from URL

flutter generate model from json

Searching device UI a ripple animation android Background

By

Rajat Palankar

-

December 27, 2019

0

Hello Guys, Welcome to Proto Coders Point, In this Android Article we will implement an android GitHub library called Ripple-background used to give device searching or ‘ripple animation android effect’

Which is the Ripple Effect Background?

An Android Ripple Background Github Library that provide an app with an beautiful ripple animation android.

To Learn in detail of this library visit official github site

This Beautiful Ripple background library is been created by Jason Yu Check out his other library they are an awesome android library and very easy to use and understand here

Demo of Ripple Searching device UI

Searching Device an Ripple Background animation gif

Implementing Searching Device Ripple UI Background

Before we start implementing this library, I just want to say that in this tutorial we are simply Createing a ripple wave backgroud UI(User Interface), This tutorial will not actually search or find real time actual device near by.

So let’s begin adding some required staff into our project.

I assume that you have already created a new android project in your android-studio or you may also add this library in your existing project, all left to you it your choice.

Adding Dependencies in our project

Now, you to add library depencencies in your project. Open build.gradle(module: app)

dependencies {
        implementation 'com.skyfishjy.ripplebackground:library:1.0.1'
}

Then, Just copy paste the above ripple background dependencies into dependencies section.

Then, all set, So the project can now easily use this library.

Adding UI of Ripple wave background in XML file

Here is a xml snippet code that will create a UI for the app, add the below lines of xml code into activity_main.xml file

<com.skyfishjy.library.RippleBackground
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content"
    app:rb_color="#0099CC"
    app:rb_radius="32dp"
    app:rb_rippleAmount="4"
    app:rb_duration="3000"
    app:rb_scale="6">
    <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_centerInParent="true"
        android:id="@+id/centerImage"
        android:src="@drawable/demoImage"/>
</com.skyfishjy.library.RippleBackground>

Explaination of above code

app:rb_color: used to set the color of ripple background, i have set it to light blue.

app:rb_radius: Radius is been used to set the cornor radius of the circle.

app:rb_rippleAmount: this will show ripple circle waves with some number.

app:rb_duration: set the duration of the ripple circle animation.

app:rb_scale: set the scale of the one last animation cycle.

Ok so inside rippleBackground library their is a ImageView that i have used to start and stop the animation effect on click.

How to start the Animation Effect of ripple wave?

final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
 ImageView imageView=(ImageView)findViewById(R.id.centerImage);
 imageView.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View view) {
         rippleBackground.startRippleAnimation();
     }
 });

same like of you want to stop the animation effect then use

rippleBackground.stopRippleAnimation();

Complete Code of Searching Device near by an Ripple Background – Android Github Library

Main_Activity.java

Copy paste the below lines of code in Main_Activity.java file

package protocoderspoint.com.ripplebackground;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;

import com.skyfishjy.library.RippleBackground;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

     boolean stop = false;
     Handler handler= new Handler();

     ImageView device;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
        device=(ImageView)findViewById(R.id.device);
        ImageView imageView=(ImageView)findViewById(R.id.centerImage);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(!stop) // if stop is not true
                {
                    //then start the
                    rippleBackground.startRippleAnimation();
                    stop=true;
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            foundDevice();
                        }
                    },3000);
                }
                else{
                    rippleBackground.stopRippleAnimation();
                    stop=false;
                    device.setVisibility(View.GONE);
                }

            }
        });
    }
    private void foundDevice(){
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(400);
        animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
        ArrayList<Animator> animatorList=new ArrayList<Animator>();
        ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(device, "ScaleX", 0f, 1.2f, 1f);
        animatorList.add(scaleXAnimator);
        ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(device, "ScaleY", 0f, 1.2f, 1f);
        animatorList.add(scaleYAnimator);
        animatorSet.playTogether(animatorList);
        device.setVisibility(View.VISIBLE);
        animatorSet.start();
    }
}

In the above lines of code i have make use of IF ELSE statement to perform start and stop of the animation effect.

I have used a trigger which is of type Booleon to check if the animation of ripple is in start or stop state.

and if the animation of searching device started we will show an device found after 3 sec of start.

and set the found device to invisible as the user stops the amination.

activity_main.xml

Copy paste the above lines of code in activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="15dp"
        android:textStyle="bold|italic"
        android:textSize="20sp"
        android:layout_gravity="center"
        android:text="Searching New Device UI Animation"
        />

    <com.skyfishjy.library.RippleBackground

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content"
        app:rb_color="#0099CC"
        app:rb_radius="32dp"
        app:rb_rippleAmount="5"
        app:rb_duration="3000"
        app:rb_scale="6">
        <ImageView
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_centerInParent="true"
            android:id="@+id/centerImage"
            android:src="@drawable/searching"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:id="@+id/device"
            android:layout_above="@id/centerImage"
            android:layout_marginBottom="32dp"
            android:layout_toLeftOf="@id/centerImage"
            android:layout_marginRight="6dp"
            android:src="@drawable/device"
            android:visibility="invisible"/>
    </com.skyfishjy.library.RippleBackground>

</LinearLayout>

Flutter Introduction Screen a welcome screen – app intro screens

By

Rajat Palankar

-

December 24, 2019

0

Hi, Guys. Welcome to proto Coders Point In this Tutorial we will implement a Flutter Introduction Screen where we can give a app with feature of flutter intro screens slider.

This intro screen is also called as Flutter OnBoarding screen introduction that can we shown only one time to the user for intro purpose.

Then, Here is a demo of how this onBoarding intro screen looks

Introduction on flutter intro screen a welcome to users

Flutter Introduction Screen will help the developer to have a screen that will show only one time at launcher of the App to explain what the app can do an how users can use a welcome screen.

Then, Now you know about the Flutter widget Let’s begin the implementation straight into the Our App.

Learn more from Official Site

Video Tutorial on App Intro Screens – flutter one time intro screen

Start for Implement the above Flutter introduction screen library

Step 1: Create a project

As usual create a new Flutter Project, I am using android studio to develop a flutter app.

File>New >New Flutter Project

Fill all the required staff while creating a new Flutter project.

Step 2: Adding Dependencies into the project

Installation of the widget you need to app introduction_screen dependencies in your pubspec.yaml

dependencies: 
  introduction_screen: ^1.0.7

Open pubspec.yaml file and add the dependencies in this file as shown in below image.

After you add it just click on Package get, So that all the required files from the dependencies get imported into your project and you can easily use those features.

Step 3: Importing the introduction screens files

Open the main.dart file and import it in it.

import 'package:introduction_screen/introduction_screen.dart';

Add the import statement into main.dart file on the top.

Step 4: Create a Simple PageViewModel

What is PageViewModel?

A pageViewModel is simply a page with different kinds of widget contents in it…..

Simple page

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: Center(
    child: Image.network("https://domaine.com/image.png", height: 175.0),
  ),
)

In This above snippet code example we only define a title, a body and an image (Never mind you ca define any kind of widget in this page View Model)

Page with custom colors

The below snippet code example will define how we can add a color to the Page

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: Center(child: Image.asset("res/images/logo.png", height: 175.0)),
  decoration: const PageDecoration(
    pageColor: Colors.blue,
  ),
),

In this we are making use of decoration where we are settting a pageColor to blue.

Like wise if you want to give styling to text you can add

titleTextStyle: TextStyle(color: Colors.orange),

Page with a footer, like a button

You can even add any footer at the bottom of the page like text,image or any button for the user to navigate user to some other pages like privacy policy page.

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: const Center(child: Icon(Icons.android)),
  footer: RaisedButton(
    onPressed: () {
      // On button presed
    },
    child: const Text("Let's Go !"),
  ),
);

Here i am making use of flutter RaisedButton that shows a button on the screen.

Intro screen with skip button

IntroductionScreen(
  pages: listPagesViewModel,
  onDone: () {
    // When done button is press
  },
  showSkipButton: true,
  skip: const Text("Skip"),
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600)),
);

Then, if you want to display a skip button using which the user can easily skip the app intro screens in the flutter app.

You need to define a showSkipButton: true and set a skip parameter with some text in it as shown in the above snippet code.

Learn more from offical flutter site

Complete Code of Flutter Introduction Screen a onBoarding flutter welcome screen

Just Copy paste the below lines of flutter code into main.dart file and the flutteer introduction screen is ready

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: mainPage(),
    );
  }
}

class mainPage extends StatefulWidget {
  @override
  _mainPageState createState() => _mainPageState();
}

class _mainPageState extends State<mainPage> {
  List<PageViewModel> getPages() {
    return [
      PageViewModel(
          image: Image.asset("images/livedemo.png"),
          title: "Live Demo page 1",
          body: "Welcome to Proto Coders Point",
          footer: Text("Footer Text here "),
          decoration: const PageDecoration(
            pageColor: Colors.blue,
          )),
      PageViewModel(
        image: Image.asset("images/visueldemo.png"),
        title: "Live Demo page 2 ",
        body: "Live Demo Text",
        footer: Text("Footer Text  here "),
      ),
      PageViewModel(
        image: Image.asset("images/demo3.png"),
        title: "Live Demo page 3",
        body: "Welcome to Proto Coders Point",
        footer: Text("Footer Text  here "),
      ),
      PageViewModel(
        image: Image.asset("images/demo4.png"),
        title: "Live Demo page 4 ",
        body: "Live Demo Text",
        footer: Text("Footer Text  here "),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Introduction Screen"),
      ),
      body: IntroductionScreen(
        globalBackgroundColor: Colors.white,
        pages: getPages(),
        showNextButton: true,
        showSkipButton: true,
        skip: Text("Skip"),
        done: Text("Got it "),
        onDone: () {},
      ),
    );
  }
}

Recommended Post

Android App Intro screen – Welcome Screen

Flutter splash screen

Flutter login page – using Velocity X library

Photo Filter Github Android Library

By

Rajat Palankar

-

December 21, 2019

1

Hi Guys Welcome to Proto Coders Point. In this Tutorial we will make use of GitHub library that will help you in Adding Filter to your photo.

This Android Photo Filter github library will help you in adding 16 different photo filter.

Photo Filter Github Android Library

This image processing library is Very Easy to use as android image filter library.

Then, let’s begin Implementing the above library in our project.

Demo

photo filter app

Step 1: Creating a new Android project

So this is common steps, you need to create a new android project in android-studio as usual

File > New > New Project

Fill all the Required data while create new project.

or else, you can even implement this github library in existing project, all left to you it’s your choice.

Step 2: Add the JitPack repository to your build file

On the right side in project section, open Build.gradle (project: level) and all the following JitPack repository in it as shown in below image.

allprojects 
{
  repositories 
  {
    maven { url 'https://jitpack.io' } //add this line
  }
}

Add here

Add the Required dependency

Then, you need to add one Dependency in build.gradle(app:module)

dependencies 
{
     ....................
     ....................
    implementation 'com.github.hgayan7:FilterLibrary:0.1.0'
}

Add here as shown

How to use Photo Filter Library?

Here is the sample code how to use this image filter library

ImageView myImageView1,myImageView2;
Bitmap myBitmap1,myBItmap2;

PhotoFilter photoFilter;

myImageView1 = findViewById(R.id.imageView1);
myBitmap1 = BitmapFactory.decodeResource(getResources(),R.drawable.myImage1);

myImageView2 = findViewById(R.id.imageView2);
myBitmap2 = BitmapFactory.decodeResource(getResources(),R.drawable.myImage2);

photoFilter = new PhotoFilter();

// using filter 'one'
myImageView1.setImageBitmap(photoFilter.one(getApplicationContext(),myBitmap1));

// using filter 'sixteen'
myImageView2.setImageBitmap(photoFilter.sixteen(getApplicationContext(),myBitmap2));

The above code is from official github photo filter library check here

What is Bitmap in android?

The Bitmap (android.graphics.Bitmap) class represents a bitmap image. You create bitmaps via the BitmapFactory (android.graphics.BitmapFactory) class.

Using a BitmapFactory, you can create bitmaps in three common ways: from a resource, a file, or an InputStream. To create a bitmap from a resource, you use the BitmapFactory method decodeResource():

In above snippet code i am making use of bitmap to decode the image resource and setting the imageView with image filter library.

you can user this filter to build an photo filter app like pixArt

Complete code of the Photo Filter library

activity_main.xml

Copy paste the below xml code in activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:gravity="center">

       <TextView
           android:text="Normal"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image1"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>

       <TextView
           android:text="Filter one"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image2"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter two"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image3"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>

       <TextView
           android:text="Filter three"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image4"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter four"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image5"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter five"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image6"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter six"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image7"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter seven"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image8"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter eight"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image9"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter Nine"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image10"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>

       <TextView
           android:text="Filter ten"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image11"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter eleven"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image12"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter twelve"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image13"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter thirteen"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image14"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter forteen"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image15"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>
       <TextView
           android:text="Filter fifteen"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image16"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>

       <TextView
           android:text="Filter sixteen"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <ImageView
           android:id="@+id/id_image17"
           android:layout_width="wrap_content"
           android:layout_height="300dp"
           android:background="@drawable/image1"/>


   </LinearLayout>

</ScrollView>

Main_Activity.java

package protocoderspoint.com.photofilter;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;

import com.uvstudio.him.photofilterlibrary.PhotoFilter;

public class MainActivity extends AppCompatActivity {

    ImageView im2,im3,im4,im5,im6,im7,im8,im9,im10,im11,im12,im13,im14,im15,im16,im17;
    Bitmap myBitmap;
    PhotoFilter photoFilter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        im2=(ImageView)findViewById(R.id.id_image2);
        im3=(ImageView)findViewById(R.id.id_image3);
        im4=(ImageView)findViewById(R.id.id_image4);
        im5=(ImageView)findViewById(R.id.id_image5);
        im6=(ImageView)findViewById(R.id.id_image6);
        im7=(ImageView)findViewById(R.id.id_image7);
        im8=(ImageView)findViewById(R.id.id_image8);
        im9=(ImageView)findViewById(R.id.id_image9);
        im10=(ImageView)findViewById(R.id.id_image10);
        im11=(ImageView)findViewById(R.id.id_image11);
        im12=(ImageView)findViewById(R.id.id_image12);
        im13=(ImageView)findViewById(R.id.id_image13);
        im14=(ImageView)findViewById(R.id.id_image14);
        im15=(ImageView)findViewById(R.id.id_image15);
        im16=(ImageView)findViewById(R.id.id_image16);
        im17=(ImageView)findViewById(R.id.id_image17);


        myBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.image1);

        photoFilter = new PhotoFilter();

        im2.setImageBitmap(photoFilter.one(getApplicationContext(),myBitmap));
        im3.setImageBitmap(photoFilter.two(getApplicationContext(),myBitmap));
        im4.setImageBitmap(photoFilter.three(getApplicationContext(),myBitmap));
        im5.setImageBitmap(photoFilter.four(getApplicationContext(),myBitmap));
        im6.setImageBitmap(photoFilter.five(getApplicationContext(),myBitmap));
        im7.setImageBitmap(photoFilter.six(getApplicationContext(),myBitmap));
        im8.setImageBitmap(photoFilter.seven(getApplicationContext(),myBitmap));
        im9.setImageBitmap(photoFilter.eight(getApplicationContext(),myBitmap));
        im10.setImageBitmap(photoFilter.nine(getApplicationContext(),myBitmap));
        im11.setImageBitmap(photoFilter.ten(getApplicationContext(),myBitmap));
        im12.setImageBitmap(photoFilter.eleven(getApplicationContext(),myBitmap));
        im13.setImageBitmap(photoFilter.twelve(getApplicationContext(),myBitmap));
        im14.setImageBitmap(photoFilter.thirteen(getApplicationContext(),myBitmap));
        im15.setImageBitmap(photoFilter.fourteen(getApplicationContext(),myBitmap));
        im16.setImageBitmap(photoFilter.fifteen(getApplicationContext(),myBitmap));
        im17.setImageBitmap(photoFilter.sixteen(getApplicationContext(),myBitmap));
    }
}

When you use this Image filter library you just need to create an object of this library. and use the created object like this:

im17.setImageBitmap(photoFilter.one(getApplicationContext(),myBitmap));

Then here, just replace the one with any number up to sixteen.

Bottom PopUp Cupertino Action Sheet flutter Widget- Flutter Programming

By

Rajat Palankar

-

December 20, 2019

0

Hi Guys, welcome to Proto Coders Point, In this Flutter Programming Tutorial we will Implement Cupertino Action Sheet Flutter Widget

What is Cupertino Action Sheet in flutter?

Cupertino Action sheet is simple an iOS action sheet that pops up from the bottom of the screen.

An Cupertino action sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context.

This Cupertino action sheet looks like a standard iOS action button, that Provides CupertinoActionSheetAction to the action provided.

Check out the Official site to learn more

Video Tutorial Watch Here itself

This is how Cupertino Action Sheet pops up from bottom of screen

Cupertino Action Sheet Widget- Flutter Programming

Properties of the CupertinoActionSheet

actions : that Display a list of action button that help the user to select any one.

title: Show the Title of CupertinoActionSheet on the top of the list.

message: describe the user what the user can select from his choice.

messageScrollController: If message to the user is too long that the user can easily scroll through the message to read it.

cancelButton: This properties is been optional, the cancel Button is been grouped separately from the other actions.

For more Visit Official Flutter site

CupertinoActionSheet implementation

So Now we have done with learning basic information about this widget.

Now it’s time to implement the Cupertino Action sheet Widget.

As usual you need to create a new Flutter project, or implement it in your existing flutter project it your choice.

So I am using Android-studio to create a new flutter Project.

File> New > New Flutter Project

Fill are the required staff.

Create a RaisedButton that can activate CupertinoActionSheet

As you Flutter Project is ready you need to remove all the existing flutter code that is been by-default added into your project by Google flutter team.

I Assume that you have removed all the default flutter code. Ok

Then, you need to create a RaiseButton inside body tag as displayed in below snippet Flutter code.

body: Center(
        child: RaisedButton(
          onPressed: () {
           //Cupertino Action sheet will come over here
          },
          child: Text("Click me "),
        ),
      ),

Here, i have a center widget that will bring all the widget at the center of the screen, Here there is a child widget RaisedButton that simply create a button widget at the center of the body tag.

RaisedButton have a Function method onPressed that triggers when the user click on Raised Button.

CupertinoActionSheet Snippet Code

Then here, i have a CupertinoActionSheet with a title that simply display a text, and Message that display the description of the popup menu.

Then, i Have actions widget that is simply a array list of Cupertino Option Menus

In the Below Snippet code i have created 2 actions button that can perform different actions.

isDefaultAction: is set to true because the action button text will be displayed with blue color.

isDestructiveAction: is set to true that display action button text in red color.

CupertinoActionSheet(
              title: Text("Cupertino Action Sheet"),
              message: Text("Select any action "),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: Text("Action 1"),
                  isDefaultAction: true,
                  onPressed: () {
                    print("Action 1 is been clicked");
                  },
                ),
                CupertinoActionSheetAction(
                  child: Text("Action 2"),
                  isDestructiveAction: true,
                  onPressed: () {
                    print("Action 2 is been clicked");
                  },
                )
              ],
);

cancelButton: this is an optional

CupertinoActionSheetAction(
               child: Text("Action 1"),
               isDefaultAction: true,
               onPressed: () {
                 print("Action 1 is been clicked");
               },
             ),
             CupertinoActionSheetAction(
               child: Text("Action 2"),
               isDestructiveAction: true,
               onPressed: () {
                 print("Action 2 is been clicked");
               },
             )
           ],
           cancelButton: CupertinoActionSheetAction(
             child: Text("Cancel"),
             onPressed: () {
               Navigator.pop(context);
             },
           ),
         );

Then, here i have an cancelButton that simply pop the current context that is running on the screen.

That means when user click ok cancel Action Button the CupertinoActionSheet will get Closed

How to show CupertinoActionsheet widget?

showCupertinoModalPopup(
                context: context, 
                builder: (context) => action  //action is final variable name 

);

Complete Cupertino Action Sheet Flutter widget source Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cupertino Action sheet demo"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            final action = CupertinoActionSheet(
              title: Text(
                "Proto Coders Point",
                style: TextStyle(fontSize: 30),
              ),
              message: Text(
                "Select any action ",
                style: TextStyle(fontSize: 15.0),
              ),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: Text("Action 1"),
                  isDefaultAction: true,
                  onPressed: () {
                    print("Action 1 is been clicked");
                  },
                ),
                CupertinoActionSheetAction(
                  child: Text("Action 2"),
                  isDestructiveAction: true,
                  onPressed: () {
                    print("Action 2 is been clicked");
                  },
                )
              ],
              cancelButton: CupertinoActionSheetAction(
                child: Text("Cancel"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            );

            showCupertinoModalPopup(
                context: context, builder: (context) => action);
          },
          child: Text("Click me "),
        ),
      ),
    );
  }
}