Home Blog Page 90

Photo Filter Github Android Library

1
Photo Filter android Library
Photo Filter android Library

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

adding jitpackio
adding jitpackio

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

0
Cupertino Action Sheet

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

 

 

 

 

Flutter Bottom Navigation Bar with Fancy Animation effect

1
Flutter Bottom Navigation Bar with Fancy Animation effect
Flutter Bottom Navigation Bar with Fancy Animation effect

Hi Guys, Welcome to Proto Coders Point.

I have Already Made a tutorial on Flutter Default Bottom Navigation Bar Check here.

In this Tutorial, we will Implement Flutter Fancy Bottom Navigation Bar animation using android-studio to write flutter Dart codes.

Then, Check out the below Image that shows you how exactly does the flutter Fancy Bottom Navigation Bar looks like.

FANCY Flutter BOTTOM Navigation Bar AMINATION

Demo

Flutter fancy Bottom Navigation bar
Flutter fancy 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.

Flutter Bottom Navigation bar

Creating Flutter Project in android Studio

As usual you need to create a new Flutter Project to implement the above.

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.

Not to Worry in our project we are simple calling StateFullWidget class from StatelessWidget

It might seem to be little confusing for beginner learn of flutter but no need to worry the complete code will given below in the end of this post.

Adding fancy_bottom_navigation dependencies into your project

Here on the right side of your android studio you will see your flutter project

Open the File called pubspec.yaml

bottom navigation bar

and copy paste below dependencies as show in the above image.

Dependencies 

fancy_bottom_navigation: ^0.3.2

Importing Fancy Bottom Navigation Bar in main.dart file

Then, once you have added required dependencies in pubspec.yaml  you need to import.

import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';

Now, Add the above import statement into main.dart file on the top.

Creating 3 dart Pages into the project

As we are making use of Bottom Navigation bar with 3 Tabs, we need to create 3 different dart pages.

That changes when user clicked of particular bottom tabs

In our project we have Home(), Weather(),and food() page.

Right click on lib directory > New > Dart File

Then, all the required files are been added in to the project

Adding codes in dart file

Home()

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          "HOME PAGE",
          style: TextStyle(fontSize: 25.0),
        ),
        padding: EdgeInsets.all(10.0),
      ),
    );
  }
}

Weather()

import 'package:flutter/material.dart';

class Weather extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          "WEATHER PAGE",
          style: TextStyle(fontSize: 25.0),
        ),
        padding: EdgeInsets.all(10.0),
      ),
    );
  }
}

Food()

import 'package:flutter/material.dart';

class Food extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          "FOOD PAGE",
          style: TextStyle(fontSize: 25.0),
        ),
        padding: EdgeInsets.all(10.0),
      ),
    );
  }
}

All the above page contain simple Text  which is child of Container()  widget in turn Container is the child if Center() widget,with simple show a text at the center of screen.

Introduction to Basic usage :

bottomNavigationBar: FancyBottomNavigation(
    tabs: [
        TabData(iconData: Icons.home, title: "Home"),
        TabData(iconData: Icons.search, title: "Search"),
        TabData(iconData: Icons.shopping_cart, title: "Basket")
    ],
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

TabData

A TabData Contains a iconData -> which is used to show a icon on the tab with some title.

onTabChangeListener this function will simple keep track of which tab is currently open. and listens to which tab this click.

Optional Usage for customizing the Bottom Navigation Bar Tabs

initialSelection -> Defaults to 0

circleColor -> Defaults to null,

activeIconColor -> Defaults to null,

inactiveIconColor -> Defaults to null,

textColor -> Defaults to null,

barBackgroundColor -> Defaults to null, derives from

key -> Defaults to null<br/>

Theme Customizing

To learn more about this Flutter widget Library refer Official site

Complete Code of Flutter Fancy Bottom Navigation Bar

main.dart

Just copy paste the below lines of flutter code under main.dart file which will show you flutter fancy bottom Navigation bar at the bottom of the screen through which you can easily navigate to different pages being at the same page.

import 'package:flutter/material.dart';
import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';
import 'Home.dart';
import 'Weather.dart';
import 'Food.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> {
  int currentPage = 0;
  final _pageOptions = [Home(), Weather(), Food()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fancy Bottom Navigation Bar"),
      ),
      body: _pageOptions[currentPage],
      bottomNavigationBar: FancyBottomNavigation(
        circleColor: Colors.green,
        tabs: [
          TabData(iconData: Icons.home, title: "Home"),
          TabData(iconData: Icons.wb_sunny, title: "Weather"),
          TabData(iconData: Icons.fastfood, title: "Food's")
        ],
        onTabChangedListener: (int position) {
          setState(() {
            currentPage = position;
          });
        },
      ),
    );
  }
}

Here, currentPage is set to 0 and pageOption is a array of different pages available

and body of flutter app is set to current page like pageOption[currentPage] with simple loads Home page when we run the app first

By making use of onTabChangedListener we are changing currentPage value to tab the tab value which is been clicked as that tabed page gets loaded on the screen.

Ok the main think is here i.e

The flutter widget package library have some Limitation

So total tabs that can be implemented using this widget is ranged from 2-4 tabs.

Gridview in Android using Base Adopter

0
Gridview in Android using Base Adopter
Gridview in Android using Base Adopter

Base Adapter android is simple a base class that is used in implementation of any Adopter that can be used in variour activity in android like ListView  or GridView.

So In this Article we need Customize the GridView by creating our own Custom Adopter that extends BaseAdopter

Below is the example of GridView in Android, In which we show the Android Version logo’s in the form of Grids.

Gridview in Android using Base Adopter

Step1: Create a new Android project in Android Studio as usually and you need to fill all the required details.

In our case we have named GridView Using Base Adopter  and package protocoderspoint.com.griviewbaseadopter

GridView Using Base Adapter
GridView Using Base Adapter

Step 3 : Now, Just Open activity_main.xml  design and paste the below xml code in that file.

Here i have created a  GridView with have set with number of columns as 3.

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

    <GridView
        android:id="@+id/simpleGridView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:footerDividersEnabled="false"
        android:padding="1dp"
        android:layout_margin="10dp"
        android:numColumns="3" /> <!-- GridView with 3 value for numColumns attribute -->
</LinearLayout>

Step 3: :  Ok then Create a new XML file  I have named the new file as gridview_image.xml. because we are just displaying a Image using ImageView and a Text with TextView.

Then the CustomAdopter to set the andorid version logo images.

You can just Copy paste below xml code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="1dp"
    android:orientation="vertical"
    android:layout_margin="10dp">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:scaleType="fitXY"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/logo1"
        />

    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="logo1"/>
</LinearLayout>

Adding Images in to Drawable Folder

Then  Here you need to download come images and paste it into drawable folder of your android project.

Keep in mind that image size should not be more then 2 mb else the app might force stop.

Now, Name all the images as logo1,logo2 and so on.

Step 5: Create a new class CustomAdapter.java and paste the below code.

CustomAdopter.java

Then, Now We have to create a CustomAdopter.java class That is Extends BaseAdapter in it.

In CustomAdopter we will set image logo’s and set it’s text under the imageview logo.

package protocoderspoint.com.gridviewusingbaseadapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {
    Context context;
    int logos[];
    LayoutInflater inflter;
    String title[];
    public CustomAdapter(Context applicationContext, int[] logos,String[] text) {
        this.context = applicationContext;
        this.logos = logos;
        inflter = (LayoutInflater.from(applicationContext));
        this.title=text;
    }
    @Override
    public int getCount() {
        return logos.length;
    }
    @Override
    public Object getItem(int i) {
        return null;
    }
    @Override
    public long getItemId(int i) {
        return 0;
    }
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        view = inflter.inflate(R.layout.gridview_image, null); // inflate the layout
        ImageView icon = (ImageView) view.findViewById(R.id.icon); // get the reference of ImageView
        icon.setImageResource(logos[i]); // set logo images

        TextView textView = (TextView)view.findViewById(R.id.text1);
        textView.setText(title[i]);
        return view;
    }
}

Step 6 : Copy below code in Main_Activity.java

package protocoderspoint.com.gridviewusingbaseadapter;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    GridView simpleGrid;

    int logos[] = {R.drawable.logo1, R.drawable.logo2, R.drawable.logo3,R.drawable.logo4,R.drawable.logo5,R.drawable.logo6,R.drawable.logo7,R.drawable.logo8};

    String title[]={"Cup Cake","Donut","Eclair","Froya","Gingerbread","Kitkat","Lollipop","And Much More"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        simpleGrid = (GridView) findViewById(R.id.simpleGridView); // init GridView

        // Create an object of CustomAdapter and set Adapter to GirdView
        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), logos,title);

        simpleGrid.setAdapter(customAdapter);

        // implement setOnItemClickListener event on GridView
        simpleGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // set an Intent to Another Activity
                Intent intent = new Intent(MainActivity.this, activity_second.class);
                intent.putExtra("image", logos[position]); // put image data in Intent
                startActivity(intent); // start Intent
            }
        });
    }
}

 

All is set and app is ready that display girdview with images in 3 columns but when its is clicked i need to open second activity to open which simply shows the image with the gridview image is been clicked

Step 7: Now Create a new Activity with name activity_second.class.

To create new Activity just follow this steps :

Right click of Project  > New >Activity > Empty Activity

And name it as activity_second, this will create both java file as well as xml file

Step 8: Open Second Actvity xml file and copy paste below code, Our Second Activity to display the android version logo image in full size, by which gridView imageis been clicked.

activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:background="#fff"
    tools:context=".activity_second">
    <ImageView
        android:id="@+id/selectedImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:scaleType="fitXY" />
</RelativeLayout>

Step 9: Now Open a new Activity that we have created just with name activity_second.java and add below code in it.

package protocoderspoint.com.gridviewusingbaseadapter;

import android.content.Intent;
import android.os.Bundle;

import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class activity_second extends AppCompatActivity {
    ImageView selectedImage;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        selectedImage = (ImageView) findViewById(R.id.selectedImage); // init a ImageView
        Intent intent = getIntent(); // get Intent which we set from Previous Activity
        selectedImage.setImageResource(intent.getIntExtra("image", 0)); // get image from Intent and set it in ImageView
    }
}

Android Registration Tutorial PHP MySQL using HttpURLConnection class

0
Android Registration Tutorial PHP MySQL using HttpURLConnection class
Android Registration Tutorial PHP MySQL using HttpURLConnection class

As you may know that Google Android has deprecated it support for Apache module i.e (HttpPost and HttpGet and HttpClient and many more class that has Apache module) since API level 22, Now the alternate way is to use JAVA’s HttpURLConnection Class.

This tutorial depicts the Android Registration form to deal with GET and POST data using HttpURLConnection class.

So then lets us start implementing a Registration form in android that stores data into MySQL phpmyadmin database using HttpURLConnection class.

Step 1: Creating a database in Phpmyadmin dashboard

if i say, I am making use of localhost to work with phpmyadmin MySQL service. you can use any of your hosting either webhosting which has phpmyadmin installed or your localhost that has WampServer installed.

how to create database in phpmyadmin
how to create database in phpmyadmin

then, login into your phpmyadmin dashboard and and create a new Database,

I have created a database name Coders (just for this tutorial)  you can specific any name for that database.

CREATE DATABASE databasename;

now, database is ready it time to create table names as register.

There are 2 ways for creating table in phpmyadmin

1st way

CREATE TABLE Coders (
    id int NOT NULL AUTO_INCREMENT,
    name varchar(20) NOT NULL,
    city varchar(20) NOT NULL,
    phone varchar(12) NOT NULL,
    CONSTRAINT Coders PRIMARY KEY (id)
);

2nd way

the second way for creating table is using phpmyadmin dashborad

creating table is using phpmyadmin dashborad

In Registration table i have for data entries where i can store data values

id: which is simple a integer value that simple store numbers that i have defined a auto increment and primary key value.

name: which stored name of the user.

city: holds place of the user.

phone: holds mobile number of the user.

All set on server side work.

Step 2 : Php code that handle storing data that if recieved from android app

conn.php

<?php
$db_name="Coders"; // database name
$mysql_username="replace with your login id";
$mysql_password="replace with your password";
$server_name="localhost";
$conn = mysqli_connect($server_name,$mysql_username,$mysql_password,$db_name);
if($conn)
{
  //echo "Connection Success";
}
else
{
  //echo "Connection Failed";

}
?>

Connection php page is user to get connected to phpmyadmin database

$db_name=”Coders”; // database name

$mysql_username=”replace with your login id”;  username that you use to login in to phpmyadmin server

$mysql_password=”replace with your password”; password that you use to sign in.

$server_name=”localhost”;  use localhost if you have phpmyadmin installed in you system or else use you doman name or IP address.

registration.php

<?php
    include('conn.php');
    if($_SERVER['REQUEST_METHOD'] == 'POST')
  {		

   
  $fname=$_POST['name']; //data recieved from android app
  $city=$_POST['city'];
  $phone=$_POST['phone'];
  
  $query="select * from registration where phone='$phone'";
  
        $result=mysqli_query($conn,$query);
    if(mysqli_num_rows($result)>0)
    {	
           while($row=mysqli_fetch_array($result))
          {
            echo trim("false");
          }
    }
        else
        {
          $query="insert into registration (name,city,phone) values ('$fname','$city','$phone');";
          mysqli_query($conn,$query);
          echo trim("true");
        }
  }   
?>	

registration php code page is use to get data from android code and send it to phpmyadmin to store that data  recieved into database.

EG: $fname=$_POST[‘name’];  :  data will be recieved from android application  to php code

insert query : insertion query will be run to store the recieved data in database.

Step 3 : android studio implementing httpURLConnection class

This Android Php project contains two android activities, MainActivity.java and SuccessActivity.java.

MainActivity is actual Registration form where you can register himself using name,city and phone number and a submit button when clicked the user get registered

SuccessActivity is a plain activity form which simple show a success message of the user screen when the registration is been successfully done.

Designing app UI using XML code

activity_main.xml

<?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"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:layout_margin="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Proto Coders Point"
        android:textSize="25sp"
        android:textColor="#0057FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Registration Form" />

    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:layout_marginTop="10dp"
        android:inputType="textPersonName"
        android:hint="NAME" />

    <EditText
        android:id="@+id/city"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:layout_marginTop="10dp"

        android:inputType="textPersonName"
        android:hint="CITY" />

    <EditText
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:layout_marginTop="10dp"
        android:inputType="textPersonName"
        android:hint="PHONE" />

    <Button
        android:id="@+id/submit"
        android:background="#6F9AF8"
        android:textColor="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="SUBMIT" />


</LinearLayout>

Java Code to Run the data transfer process

Snippet code of how to use HttpURLConnection class in andoid

try {
                // Setup HttpURLConnection class to send and receive data from php and mysql
                conn = (HttpURLConnection)url.openConnection();
                conn.setReadTimeout(READ_TIMEOUT);
                conn.setConnectTimeout(CONNECTION_TIMEOUT);
                conn.setRequestMethod("POST");

                // setDoInput and setDoOutput method depict handling of both send and receive
                conn.setDoInput(true);
                conn.setDoOutput(true);

                // Append parameters to URL
                Uri.Builder builder = new Uri.Builder()
                        .appendQueryParameter("username", params[0])
                        .appendQueryParameter("password", params[1]);
                String query = builder.build().getEncodedQuery();

                // Open connection for sending data
                OutputStream os = conn.getOutputStream();
                BufferedWriter writer = new BufferedWriter(
                        new OutputStreamWriter(os, "UTF-8"));
                writer.write(query);
                writer.flush();
                writer.close();
                os.close();
                conn.connect();

            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
                return "exception";
            }

MainActivity.java

The complete java code is below

package protocoderspoint.com.localhostphpmyadmin;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;
import android.content.Intent;
import android.net.Uri;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import org.apache.http.client.ClientProtocolException;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.net.HttpURLConnection;
import java.net.URL;

public class MainActivity extends AppCompatActivity {

    Button Submit;
    EditText name,city,phone;
    ProgressDialog pdDialog;
    String URL_REGISTER="http://192.168.0.10/protocoderspoint/register.php";
    String sname,scity,sphone;
    String URL_RESPONSE="";

    HttpURLConnection conn;
    URL url = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        name=(EditText)findViewById(R.id.name);
        city=(EditText)findViewById(R.id.city);
        phone=(EditText)findViewById(R.id.phone);

        Submit=(Button)findViewById(R.id.submit);

        Submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                 sname = name.getText().toString();
                 scity = city.getText().toString();
                 sphone=phone.getText().toString();

                Log.d("text",sname+scity+sphone);

               new user_register().execute();
            }
        });
    }

    public class user_register extends AsyncTask<Void, Void, String> {

        @Override
        protected  void onPreExecute() {
           
            super.onPreExecute();
            pdDialog = new ProgressDialog(MainActivity.this);
            pdDialog.setMessage("Registering user Please Wait..");
            pdDialog.setCancelable(false);
            pdDialog.show();

        }

        @Override
        protected String doInBackground(Void... arg0) {
           try {
                URL url = new URL(URL_REGISTER);
                
                conn = (HttpURLConnection)url.openConnection();
                conn.setReadTimeout(15000);
                conn.setConnectTimeout(10000);
                conn.setRequestMethod("POST");

                conn.setDoInput(true);
                conn.setDoOutput(true);


                System.out.println("name:"+sname);
                System.out.println("city:"+scity);
                System.out.println("phone:"+sphone);

                // Append parameters to URL
                Uri.Builder builder = new Uri.Builder()
                        .appendQueryParameter("name", sname)
                        .appendQueryParameter("city", scity)
                        .appendQueryParameter("phone",sphone);
                String query = builder.build().getEncodedQuery();

               // Open connection for sending data
                OutputStream os = conn.getOutputStream();
                BufferedWriter writer = new BufferedWriter(
                        new OutputStreamWriter(os, "UTF-8"));
                writer.write(query);
                writer.flush();
                writer.close();
                os.close();
                conn.connect();

                int response_code = conn.getResponseCode();

                // Check if successful connection made
                if (response_code == HttpURLConnection.HTTP_OK) {

                    // Read data sent from server
                    InputStream input = conn.getInputStream();
                    BufferedReader reader = new BufferedReader(new InputStreamReader(input));
                    StringBuilder result = new StringBuilder();
                    String line;

                    while ((line = reader.readLine()) != null) {
                        result.append(line);
                    }

                    // Pass data to onPostExecute method
                    return(result.toString());

                }else{

                    return("unsuccessful");
                }


            }
            catch (ClientProtocolException e)
            {

                Log.d("BLOOD","IOE response " + e.toString());
                // TODO Auto-generated catch block
                URL_RESPONSE="ERROR";
            }
            catch (IOException e)
            {

                Log.d("BLOOD","IOE response " + e.toString());
                // TODO Aut return 0
                URL_RESPONSE="ERROR";
            }

            return null;
        }

        @Override
        protected void onPostExecute(String result) {
            super.onPostExecute(result);
            if (pdDialog.isShowing())
                pdDialog.dismiss();

            String trim_result=result.trim();


            Toast.makeText(MainActivity.this, result.trim(), Toast.LENGTH_LONG).show();

            if(trim_result.equalsIgnoreCase("true"))
            {
                /* Here launching another activity when login successful. If you persist login state
                use sharedPreferences of Android. and logout button to clear sharedPreferences.
                 */

                Intent intent = new Intent(MainActivity.this,SuccessActivity.class);
                startActivity(intent);
                MainActivity.this.finish();

            }else if (result.equalsIgnoreCase("false")){

                // If username and password does not match display a error message
                Toast.makeText(MainActivity.this, "Invalid email or password", Toast.LENGTH_LONG).show();

            } else if (result.equalsIgnoreCase("exception") || result.equalsIgnoreCase("unsuccessful")) {

                Toast.makeText(MainActivity.this, "OOPs! Something went wrong. Connection Problem.", Toast.LENGTH_LONG).show();

            }
        }

        }

    }


  • On Submit Button pressed user_register function trigged.
  • user_register that extends AsyncTask, Asynctask is very useful when it comes to handing any process that runs of background.
  • onPreExecute(): used to show progressDialog on the screen.
  • doInBackground(): The sending and recieving data from android registration app and to php file using HttpURLConnection class.
  • onPostExecute(): this will get execute as soon as doInBackground() task gets completed, here we just disable progressDialog box and and get response from server in teams of true or false, which means registration is successful or unsuccessful.

Then,now the App will successfully run on android 7 and below but when it comes to run on android 8 and above you may face error like:

Error 1 : D/NetworkSecurityConfig: No Network Security Config specified, using platform default

Error 2 : IOE response java.io.IOException: Cleartext HTTP traffic to 192.168.0.10 not permitted

Then to solve this problem you need to do this

Create file res/xml/network_security_config.xml –

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">192.168.0.10</domain>
    </domain-config>
</network-security-config>

if you are using localhost replace domain IP with your IP address or your domain name

AndroidManifest.xml –

<application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        ...>
        ...

</application>

Don’t forget Internet Permission in androidmanifest.xml file.

Then, all set  your app is ready to execute

that Store data in to Phpmyadmin database server.

Flutter Slider – How to Implement Range Slider in flutter app

1
Flutter Slider
Flutter Slider

Hi Guys, welcome to Proto Coders Point  in this Tutorial will we Learn How to Implement Flutter Slider with show Value.

What is Flutter Slider

A Slider in flutter app development is a Material Design , that is basically used in selecting a range of values.

A slider can be used to select from either a continuous or a discrete set of values. The default is to use a continuous range of values from min to max. To use discrete values, use a non-null value for divisions, which indicates the number of discrete intervals. For example, if min is 0.0 and max is 50.0 and divisions is 5, then the slider can take on the discrete values 0.0, 10.0, 20.0, 30.0, 40.0, and 50.0.

Here are the terms for the parts of a Flutter slider are:

  • A “thumb”,  is a Round shape that help the user to slide horizontally when user what to change in some values.
  • “track”, is a  horizontal line where the user can easily slide the thumb.
  • The “value indicator”, which is a shape that pops up when the user is dragging the thumb to indicate the value being selected.
  • The “active” side of the slider is the side between the thumb and the minimum value.
  • The “inactive” side of the slider is the side between the thumb and the maximum value.

So Let’s Begin the Implementation of Flutter Code with show values.

Flutter slider show value

Implement Flutter Slider with show value

First of all with is very much common, your need to create a new Project or Open an existing project  where you want to implement Flutter slider. So i am using android-stdio as my Development Toolkit.

New > New Flutter Project > Give a Name to the project and finish

Then, as soon as new Flutter project is been created, Flutter team have already set a default  code that simple counts the number of time the floatingbutton is been pressed.

So, I recommend remove all the code persent in  lib > main.dart file  and copy paste the below code in it.

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  Slider',
      home: MyHomePage(title: 'Flutter Slider Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Demo on Flutter Slider',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
    );
  }
}

Note: The above code is not the complete working of Flutter project, it’s a way to clean all the default code.

The Final Code of complete working Flutter Slider is at the bottom on this Tutorial, you can just copy paste it in main.dart.

Slider comes with Various Properties

As i said Flutter Slider comes with Various Properties that help Flutter Developer to Customize the slider.

You can learn more about slider class properties navigating to official flutter page.

Slider(
              value: height.toDouble(),
              min: 80,
              max: 220,
              activeColor: Colors.pink,
              onChanged: (double value) {
                setState(() {
                  height = value.round();
                });
              },
            ),
  • activeColor → Color The color to use for the portion of the slider track that is active.
  • max → double – The maximum value the user can select.
  • min → double – The minimum value the user can select.
  • onChanged → ValueChanged<doubleCalled during a drag when the user is selecting a new value for the slider by dragging.
  • value → double – The currently selected value for this slider.

Flutter Slider Not Moving

My Flutter app developer who are beginner in flutter are facing some problem while working with flutter slider that’s because :

Flutter Slider will not move if you not used setState method in OnChanged to change value.

onChanged: (double value) {
                setState(() {
                  height = value.round();
                });
              },

so, you need to update value as user slide the slider. as shown in above snippet code.

Complete Code of Flutter Slider with show value change

main.dart

So, just copy paste the below complete lines of source code in to main.dart file to make Flutter slider work.

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  Slider',
      home: MyHomePage(title: 'Flutter Slider Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int height = 180;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Proto Coders Point Demo on Flutter Slider',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500),
            ),
            SizedBox(
              height: 50.0,
            ),
            Text(
              "SET HEIGHT",
              style: TextStyle(fontWeight: FontWeight.w900, fontSize: 30.0),
            ),
            SizedBox(
              height: 50.0,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.baseline,
              textBaseline: TextBaseline.alphabetic,
              children: <Widget>[
                Text(
                  height.toString(),
                  style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.w900),
                ),
                Text("cm")
              ],
            ),
            Slider(
              value: height.toDouble(),
              min: 80,
              max: 220,
              activeColor: Colors.pink,
              onChanged: (double value) {
                setState(() {
                  height = value.round();
                });
              },
            ),
            Text("Just slide the Flutter Slider to change value")
          ],
        ),
      ),
    );
  }
}
flutter slider show value

Recommended Articles on flutter

Image slider in flutter using Carousel Pro Flutter Library

flutter swiper – image slider/swiper in flutter

Flutter provider for beginners tutorial with app example