Hiii flutter developer in this Article I am sharing how to make a simple intro slider for Flutter App Example. In this flutter tutorial, we design a beautiful intro slider for your flutter to introduce your app and share functionality about your app. Intro your app services because this is helpful for end-user.
As per making a stander App today mark its very hard to make your app user-friendly and attractive. So that for I making a Simple and configurable app introduction slider for Flutter.
Let’s Start Making a Simple and custom intro slider.
Step 1: Start your android studio and create your flutter application.
Firstly start your android studio and make your flutter application and finish the steps. after completely syncing your project open your main. dart file and clear all code and add implement these codes for intro slider for Flutter App Example ,
Simple intro slider for Flutter App Example Code
Table of Contents
Step 2: Add this code in your main.dart file.
import 'dart:io';
import 'data/data.dart';
import 'data/main.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
debugShowCheckedModeBanner: false,
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<SliderModel> mySLides = new List<SliderModel>();
int slideIndex = 0;
PageController controller;
Widget _buildPageIndicator(bool isCurrentPage){
return Container(
margin: EdgeInsets.symmetric(horizontal: 2.0),
height: isCurrentPage ? 10.0 : 6.0,
width: isCurrentPage ? 10.0 : 6.0,
decoration: BoxDecoration(
color: isCurrentPage ? Colors.grey : Colors.grey[300],
borderRadius: BorderRadius.circular(12),
),
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
mySLides = getSlides();
controller = new PageController();
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xff3C8CE7), const Color(0xff00EAFF)])),
child: Scaffold(
backgroundColor: Colors.white,
body: Container(
height: MediaQuery.of(context).size.height - 100,
child: PageView(
controller: controller,
onPageChanged: (index) {
setState(() {
slideIndex = index;
});
},
children: <Widget>[
SlideTile(
imagePath: mySLides[0].getImageAssetPath(),
title: mySLides[0].getTitle(),
desc: mySLides[0].getDesc(),
),
SlideTile(
imagePath: mySLides[1].getImageAssetPath(),
title: mySLides[1].getTitle(),
desc: mySLides[1].getDesc(),
),
SlideTile(
imagePath: mySLides[2].getImageAssetPath(),
title: mySLides[2].getTitle(),
desc: mySLides[2].getDesc(),
)
],
),
),
bottomSheet: slideIndex != 2 ? Container(
margin: EdgeInsets.symmetric(vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: (){
controller.animateToPage(2, duration: Duration(milliseconds: 400), curve: Curves.linear);
},
splashColor: Colors.blue[50],
child: Text(
"SKIP",
style: TextStyle(color: Color(0xFF0074E4), fontWeight: FontWeight.w600),
),
),
Container(
child: Row(
children: [
for (int i = 0; i < 3 ; i++) i == slideIndex ? _buildPageIndicator(true): _buildPageIndicator(false),
],),
),
FlatButton(
onPressed: (){
print("this is slideIndex: $slideIndex");
controller.animateToPage(slideIndex + 1, duration: Duration(milliseconds: 500), curve: Curves.linear);
},
splashColor: Colors.blue[50],
child: Text(
"NEXT",
style: TextStyle(color: Color(0xFF0074E4), fontWeight: FontWeight.w600),
),
),
],
),
): InkWell(
onTap: (){
print("Get Started Now");
},
child: Container(
height: Platform.isIOS ? 70 : 60,
color: Colors.blue,
alignment: Alignment.center,
child: Text(
"GET STARTED NOW",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
),
),
),
),
);
}
}
class SlideTile extends StatelessWidget {
String imagePath, title, desc;
SlideTile({this.imagePath, this.title, this.desc});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(imagePath),
SizedBox(
height: 40,
),
Text(title, textAlign: TextAlign.center,style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20
),),
SizedBox(
height: 20,
),
Text(desc, textAlign: TextAlign.center,style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14))
],
),
);
}
}
Step 3: create assets folder Add Image in assets folder.
make an assets folder in your project and copy the past image in the assets folder. for using these images in your data.dart file for showing images on your screen.
Step 4: Create a data.dart file and add these.
in your data.dart file, you can add these dates of your slider text according to your requirements.and set text title, description, and image on your screen.
import 'package:flutter/material.dart';
class SliderModel{
String imageAssetPath;
String title;
String desc;
SliderModel({this.imageAssetPath,this.title,this.desc});
void setImageAssetPath(String getImageAssetPath){
imageAssetPath = getImageAssetPath;
}
void setTitle(String getTitle){
title = getTitle;
}
void setDesc(String getDesc){
desc = getDesc;
}
String getImageAssetPath(){
return imageAssetPath;
}
String getTitle(){
return title;
}
String getDesc(){
return desc;
}
}
List<SliderModel> getSlides(){
List<SliderModel> slides = new List<SliderModel>();
SliderModel sliderModel = new SliderModel();
//1
sliderModel.setDesc("Discover a Food Courner offering the best fast food near you");
sliderModel.setTitle("Search......");
sliderModel.setImageAssetPath("assets/illustration.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
//2
sliderModel.setDesc("Our food plan is filled with delicious seasonal vegetables, whole grains, fast food , burgger , pizza etc.");
sliderModel.setTitle("Order..... ");
sliderModel.setImageAssetPath("assets/illustration2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
//3
sliderModel.setDesc("Food delivery or pickup from local restaurants, Explore restaurants that deliver near you.");
sliderModel.setTitle("Deliver........");
sliderModel.setImageAssetPath("assets/illustration3.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
return slides;
}
Flutter Intro Slider Full Source Code on Github
Read More Tutorial
add a comment