Home Blog Page 64

Flutter Rich Text Widget – To show TextView with Some textStyle

1
Flutter Rich Text Widget
Flutter Rich Text Widget

Hi Guys welcome to Proto Coders Point, In the Tutorial, we will learn about the Flutter widget class i.e Rich Text.

Introduction to Flutter RichText widget

In Flutter, RichText is used to display multiply text styles.

Here, the text to be displayed is done using TextSpan objects.

The text which is displayed in the rich text widget should be styled explicitly. you can set a DefaultTextStyle using the current BuildContext to provide defaults. To learn more on how to style text in RichText Widget. see the documentation for TextStyle.

Implementation of Flutter Rich Text Example

ok, So we now know the basic of the above Flutter Text Widget. It’s time to implement the widget in our project. For that, we need to first create a new Flutter Project or you can continue with your existing one.

File > New > New Flutter Project

If you can’t find any option to create a flutter project that might be because you have not installed the flutter plugin into your android studio.

Check out this post to install flutter in android studio.

How to install flutter in android studio

Example of Flutter RichText with Code.

Code

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("Rich Text Demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: RichText(
          text: TextSpan(
            text: 'The harder you work for something,',
            style: TextStyle(fontSize: 15.0, color: Colors.lightBlue),
            children: <TextSpan>[
              TextSpan(
                text: ' The greater you\'ll feel when you achieve it',
                style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    color: Colors.red),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Result:

Flutter rich text example

Here is another example of RichText Widget

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("Rich Text Demo"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              Text(
                "Motivational Quotes",
                style: TextStyle(fontWeight: FontWeight.w800, fontSize: 25.0),
              ),
              RichText(
                text: TextSpan(
                  text: 'The harder you work for something,',
                  style: TextStyle(fontSize: 15.0, color: Colors.lightBlue),
                  children: <TextSpan>[
                    TextSpan(
                      text: ' The greater you\'ll feel when you achieve it',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 20,
                          color: Colors.red),
                    ),
                  ],
                ),
              ),
              Text(
                "Sentance 2",
                style: TextStyle(fontWeight: FontWeight.w900, fontSize: 30.0),
              ),
              RichText(
                text: TextSpan(
                  text: 'Your limitation',
                  style: TextStyle(fontSize: 15.0, color: Colors.lightBlue),
                  children: <TextSpan>[
                    TextSpan(
                      text: '— it\'s only your',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 20,
                          color: Colors.yellow[900]),
                    ),
                    TextSpan(
                      text: ' IMAGINATION.',
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.green,
                          fontSize: 25),
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

Output – Result 

Flutter rich text flutter center
Flutter rich text flutter

Flutter RichText Widget is very much helpful when you want to show Text View in different TextStyle.

as in the above Code or image, I have made the Text font too big in the same sentence this you can’t Achieve using a normal Text Widget.

By you RichText in a flutter, we can Design the UI to show text to users as we want for example Making the first letter to be bigger in the sentence.

To learn more about flutter Widget visit the official Flutter site here

Flutter Data Table — A flutter widget of the week

0
Flutter DataTable
Flutter DataTable

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.

Read More from official site.

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

flutter data table
flutter data table simple data

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

flutter dataTable properties

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

datatable flutter tooktip

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

2
parse json in flutter
parse json in flutter

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

parse json in flutter
Output of parse json in flutter

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

0
Searching Device an Ripple Background
Searching Device an Ripple Background

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

ripple background dependencies
ripple background dependencies

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

0
introduction screen flutter
introduction screen flutter

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

Flutter welcome intro screen
Flutter welcome intro screen

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

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

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.

 

 

 

Recommended Book