You can add slider in flutter with the help of “intro_slider” plugin. To integrate this please follow below steps -
Add below line in your pubspace.yam file -
dependencies:
intro_slider: ^2.2.0
Now click on “Package get” option from top section to get this package in your app.
Now, Import below package in your file -
import 'package:intro_slider/intro_slider.dart';
Note - Make sure to add your images in pubspace.yaml file like this -
assets:
- assets/images/photo_eraser.png
- assets/images/photo_pencil.png
- assets/images/photo_ruler.png
Slider images for Android and iOS
Create a new class as below -
import 'package:flutter/material.dart';
import 'package:intro_slider/dot_animation_enum.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
class TutorialScreen extends StatefulWidget{
TutorialScreen({Key key}) : super(key: key);
@override
TutorialScreenState createState() => new TutorialScreenState();
}
class TutorialScreenState extends State<TutorialScreen>{
List<Slide> slides = new List();
@override
void initState() {
super.initState();
slides.add(
new Slide(
title: "ERASER",
description: "Allow miles wound place the leave had. To sitting subject no improve studied limited",
pathImage: "assets/images/photo_eraser.png",
backgroundColor: Color(0xfff5a623),
),
);
slides.add(
new Slide(
title: "PENCIL",
description: "Ye indulgence unreserved connection alteration appearance",
pathImage: "assets/images/photo_pencil.png",
backgroundColor: Color(0xff203152),
),
);
slides.add(
new Slide(
title: "RULER",
description:
"Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
pathImage: "assets/images/photo_ruler.png",
backgroundColor: Color(0xff9932CC),
),
);
}
void onDonePress() {
// Do what you want
}
@override
Widget build(BuildContext context) {
return new IntroSlider(
slides: this.slides,
onDonePress: this.onDonePress,
);
}
}
Now call this from your main.dart file by using below code -
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: TutorialScreen(),
debugShowCheckedModeBanner: false
);
}
}
This plugin have many options you can check all available options on below urls -
Github url - https://github.com/duytq94/flutter-intro-slider
