Social Media Story View Page development using Flutter
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will make use of a Flutter Library “Story_View” using which you can easily create a whatsapp stories or instagram stories page.
Introduction to story view package library
Story View Flutter Library Widget is very useful for the Flutter developer, By using this library you can display Social media stories pages just like WhatsApp Status Story or Instagram Status Story View.
FINAL RESULT OF THIS LIBRARY
First Story
Second Story
Third Story
Fourth Story
Features of StoryView Widget Library
You can add
Simple Text Status story.
Images Stories.
GIF Images Stories.
Video Stories( with caching enabled).
Gesture for Previous,Next and Pause the Story.
Caption for each story items.
A animated Progress indicator on top of every story views
Let’s get Started with adding this library into your flutter project
Social Media Story View Page development using Flutter
Step 1 : Adding Story View dependencies into your flutter project
Open pubspec.yaml file and add the story view dependencies under dependencies section
dependencies:
story_view: ^0.10.0 // add this line
Step 2: Import the story_view.dart file in main.dart
open main.dart file and import the class file in it
import 'package:story_view/story_view.dart';
Step 3: Creating StoryItem list and adding it to HomePage(main.dart) with widget
Create a storyController
final storyController = StoryController(); // used to control the media story
Generate a list of stories
//creating the list of Social media Storys
// Social Media Story List
List<StoryItem> storyItemsList = [
StoryItem.text("Hello Guys, 👉", Colors.blue[500]), //story 1
StoryItem.text(
"Welcome to Proto Coders Point, 👉", Colors.red[600]), //story 2
StoryItem.pageImage(
NetworkImage(
"https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
caption: "THINK TWICE CODE ONCE"), //story 3
StoryItem.pageImage(
NetworkImage(
"https://protocoderspoint.com/wp-content/uploads/2019/10/protocoderspoint-rectangle-round-.png"),
caption: "HOPE THIS TUTORIAL HELP YOU"), //story 4
];
then, Add the storycontroller and story item list into StoryView() widget
StoryView(
storyItemsList, // this is list of StoryItems
controller: storyController,
repeat: true, // set it to false if
onComplete: () => print("STORY COMPLETED"), // what sould happen when story ends
),
Complete code Copy Paste it in main.dart file
main.dart
import 'package:flutter/material.dart';
import 'package:story_view/story_view.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',
//removing debug banner
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// lets start creating Social media Story view
final storyController = StoryController(); // used to control the media story
//creating the list of Social media Storys
// Social Media Story List
List<StoryItem> storyItemsList = [
StoryItem.text("Hello Guys, 👉", Colors.blue[500]), //story 1
StoryItem.text(
"Welcome to Proto Coders Point, 👉", Colors.red[600]), //story 2
StoryItem.pageImage(
NetworkImage(
"https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
caption: "THINK TWICE CODE ONCE"), //story 3
StoryItem.pageImage(
NetworkImage(
"https://protocoderspoint.com/wp-content/uploads/2019/10/protocoderspoint-rectangle-round-.png"),
caption: "HOPE THIS TUTORIAL HELP YOU"), //story 4
];
@override
Widget build(BuildContext context) {
return Material(
child: StoryView(
storyItemsList,
controller: storyController,
repeat: true,
onComplete: () => print("STORY COMPLETED"),
),
);
}
}
Then, your flutter application is ready to show a Story page with 4 StoryItems.
For more in detail about this Story View Page Flutter library visit official here
Hi Guys, Welcome to Proto Coders Point, This is PART 2 of WhatsApp Clone UI using Flutter, In this part we will continue with clone designing Status Tab Page.
If you have not gone through the first part of WhatsApp UI Clone using Flutter, Then make sure to go through it. Here
In last section i have forgot to remove FloatingActionButton from Other Tabs, In Other words FloatingActionButton(New Chat Button) Should be Visible only in ChatScreen, So we need to Disable the button when user navigate/swipe towords other screen.
Then, To do so Follow this steps:
Step 1: Add a bool variable
Open main.dart file or whatever you have names your homepage
bool showFloatingB = true;
Step 2: Replace the initState()
@override
void initState() {
// TODO: implement initState
super.initState();
// total tab we are creating is 4 so : length is 4 : initialIndex is set to position 1
_tabController = new TabController(length: 4, vsync: this, initialIndex: 1);
_tabController.addListener(() {
if (_tabController.index == 1) {
setState(() {
showFloatingB = true;
});
} else {
setState(() {
showFloatingB = false;
});
}
});
}
In InitState method, we are checking _tabController index using _tabController.addListener.
If _tabController.index == 1 then it’s chatScreen visible so we set the showFloatingB to true else, We set showFloatingB to false.
Here, we are setting the FloatingActionButton to be visible only if the showFloatingB is true else floatingActionButton is set to null, that means floatingActionButton is not visible.
WhatsApp Clone App UI Design using Flutter Status Tab Page | PART 2
Step 1: WhatsApp UI StatusPage Using Flutter
Now,Open StatusPage.dart file and copy paste the below lines of code in it.
Then, Now Open pubspec.yaml file, and add flutter depencencies for the story_view flutter library package.
dependencies:
story_view: ^0.10.0
Step 3: Create a new dart file StoryPage.dart
right click on lib > New > dart file and name it as StoryPage.dart
Then, Copy Paste the below lines of dart code.
import 'package:flutter/material.dart';
import 'package:story_view/story_view.dart';
class StoryPage extends StatefulWidget {
@override
_StoryPageState createState() => _StoryPageState();
}
class _StoryPageState extends State<StoryPage> {
final storycontroller = StoryController(); //a controller for your story
final List<StoryItem> storyItems = [
StoryItem.text("Hello Guys, Welcome to Proto Coders Point",Colors.blue[500]), // Story 1
StoryItem.pageImage(NetworkImage("https://protocoderspoint.com/wpcontent/uploads/2019/10/protocoderspoint-rectangle-round-.png")), //Story 2
// you can add as many as whatsapp story in this list
];
@override
Widget build(BuildContext context) {
return Material(
child: StoryView(
storyItems,
controller: storycontroller,
inline: false,
repeat: false,
onComplete: () => Navigator.pop(context), // when storys ends , the StoryPage wil be poped from the view
),
);
}
}
There you go Part 2 is Completed, your Flutter whatsapp clone Ui Design is ready to show ChatScreen and StatusScreen with WhatsApp Story Clone page.
Hi Guys, Welcome to Proto Coders Point, In this Android Tutorial we will create an App that convert a website into an app.
For this we gonna use webview to display our website
What is Webview in android?
In android a webviewis a component of android Operating system(OS) that allows our application to load and display any website into an application.
This tutorial will be short and simple to understand so let’s begin implementation to display website straight into our android applicaton.
How to Convert Website into Android App ? Follow the Steps.
you can even learn this from below video
Step 1: Create a new Android Project or open Existing Project.
OffCourse you need to create a new android project.
Go to File > New > New Project name the project as “Loading Website android” or as per your choice.
Step 2 : Add Internet Permission
Open AndroidManifest.xml file and add the <user-permission> INTERNET as we gonna load a URL into our android application we do need INTERNET PERMISSION to be set.
paste below inside <manifest> tag in AndroidManifest.xml
Then, Now open MainActivity.xml and add the java code
package com.protocoderspoint.webviewexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//find the view
webView = (WebView)findViewById(R.id.webview);
// to load all the web page in app itself use this
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("https://protocoderspoint.com/");
WebSettings webSettings =webView.getSettings();
//if your website is using any javascript that needs to load some script then you need to enable javascript in android application
webSettings.setJavaScriptEnabled(true);
}
@Override
public void onBackPressed() {
// if any previous webpage exist then onback pressed will take care of it
if(webView.canGoBack())
{
webView.goBack();
}else{
//else it will exit the application
super.onBackPressed();
}
}
}
Hi Guys,Welcome to Proto Coders Point, In this Flutter Tutorial we gonna design a beautiful Login UI Screen in Flutter using Velocity X Library developed by Pawan Kumar.
ZStack is a widget of Velocity X that Will simply Overlap the children and display it.
VxBox is a widget of Velocity X that will simple display by default in square shape, you can customize it as per your requirement.
Flutter Sign In with Email
Then, let’s have a look on next button design SignIn with Email which is actual a Card Widget that works as a button.
GestureDetector(
onTap: () {
// perform your action here
print("Sign in Email Clicked");
},
child: 'Sign-In with Email'
.text
.xl
.semiBold
.gray700
.makeCentered()
.card
.rounded
.gray400
.make()
.wh(MediaQuery.of(context).size.width, 65)
.pOnly(left: 20, right: 20, top: 20),
),
Here i have Converted a Text String into a Text Widget using VelocityXmake() property, Then i have wrapped the whole Text widget with card view so that it looks like a button.
Facebook/Google Signin flutter UI Design
Then the last step we will create 2 buttons inside a row widget so that each button get set side by side as how below:
Then, As you can see there are 2 buttons for Facebook SignIn flutter and flutter signIn using google.
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will discuss & implement 2 different flutter plugin/library, that is been used to ask use to 5 star rating review in our flutter application.
This library is the best library as it comes with a star rating with touch and even it enables to swipe rating to star review. It’s named as smooth star rating flutter because this library will detect this gesture you make on the flutter star rating icon to give the rating.
This are the feature of this library:
Change the default star icons with your desired Icons.
Give user to rate using half rate or full ( Eg : 2.5 rating or 4.5 rating )
swiping on icon will increment/decrement the rating bar star.
allowHalfRating - Whether to use whole number for rating(1.0 or 0.5)
onRatingChanged(int rating) - Rating changed callback
starCount - The maximum amount of stars
rating - The current value of rating
size - The size of a single star
color - The body color of star
borderColor - The border color of star
spacing - Spacing between stars(default is 0.0)
filledIconData - Full Rated Icon
halfFilledIconData - Half Rated Icon
defaultIconData - Default Rated Icon
2. Flutter Rating Dialog ( Library 2 )
This flutter rating dialog is awesome as it provide beautiful and customizable Rating star icon dialog package for flutter application development.
Installation of Flutter rating dialog plugin
Adding depencencies
Open pubspec.yaml file and all the below raiting dialog depencencies
dependencies:
rating_dialog: ^1.0.0 // add this line
Then, just click on package_get this will download all the required classes in your flutter project.
Import the package class file
Then, after adding the library, you need to import the rating_dialog.dart whereever you need to show rating dialog box.
Snippet Code to show AlertDialogin flutter with rating dialog
void show() {
showDialog(
context: context,
barrierDismissible: true, // set to false if you want to force a rating
builder: (context) {
return RatingDialog(
icon: const Icon(
Icons.star,
size: 100,
color: Colors.blue,
), // set your own image/icon widget
title: "Flutter Rating Dialog",
description: "Tap a star to give your rating.",
submitButton: "SUBMIT",
alternativeButton: "Contact us instead?", // optional
positiveComment: "We are so happy to hear 😍", // optional
negativeComment: "We're sad to hear 😭", // optional
accentColor: Colors.blue, // optional
onSubmitPressed: (int rating) {
print("onSubmitPressed: rating = $rating");
// TODO: open the app's page on Google Play / Apple App Store
},
onAlternativePressed: () {
print("onAlternativePressed: do something");
// TODO: maybe you want the user to contact you instead of rating a bad review
},
);
});
}
The above snippet code has a method show() which have showDialog() widget that will return/display RatingDialog() which is a class of this library.
RatingDialog() widget have various parameters or we can say features.
icon : when you can display your flutter app logo
title: basically to title text
description : text to ask user for there valuable star reviews.
submitButton : will show a simple button for submission of the review.
alternativeButton : you may use this button to navigate user to URL of your company website to know more.
positiveComment : if you select more the 3 star rating then you can show a positive message to user.
negativeComment: if you select 3 or less star rating then you can show different message to user.
onSubmitPressed(){} : what action to be performed when used click of submit review button
onAlternativePressed(){} : where the used should be navigated when user click on more info button.
Complete Source Code with above 2 rating bar dialog example in flutter
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';
import 'package:rating_dialog/rating_dialog.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double rating = 4.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("App Rating stars")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Library First : 'Smooth Star Rating' ",
style: TextStyle(fontSize: 20),
),
SizedBox(
height: 10,
),
SmoothStarRating(
rating: rating,
size: 35,
filledIconData: Icons.star,
halfFilledIconData: Icons.star_half,
defaultIconData: Icons.star_border,
starCount: 5,
allowHalfRating: true,
spacing: 2.0,
onRatingChanged: (value) {
setState(() {
rating = value;
print(rating);
});
},
),
Text(
"You have Selected : $rating Star",
style: TextStyle(fontSize: 15),
),
SizedBox(
height: 15,
),
Text(
"Library Second: 'Rating_Dialog ' ",
style: TextStyle(fontSize: 20, color: Colors.deepOrange),
),
RaisedButton(
onPressed: () {
show();
},
child: Text("Open Flutter Rating Dialog Box"),
)
],
),
));
}
void show() {
showDialog(
context: context,
barrierDismissible: true, // set to false if you want to force a rating
builder: (context) {
return RatingDialog(
icon: const Icon(
Icons.star,
size: 100,
color: Colors.blue,
), // set your own image/icon widget
title: "Flutter Rating Dialog",
description: "Tap a star to give your rating.",
submitButton: "SUBMIT",
alternativeButton: "Contact us instead?", // optional
positiveComment: "We are so happy to hear 😍", // optional
negativeComment: "We're sad to hear 😭", // optional
accentColor: Colors.blue, // optional
onSubmitPressed: (int rating) {
print("onSubmitPressed: rating = $rating");
// TODO: open the app's page on Google Play / Apple App Store
},
onAlternativePressed: () {
print("onAlternativePressed: do something");
// TODO: maybe you want the user to contact you instead of rating a bad review
},
);
});
}
}
