How to create dynamic introduction_screen in Flutter with introduction_screen package.
Means We are pass 3 screen in api. introduction_screen 3 pages.
We are pass 4 screen in api. introduction_screen 4 pages.
Package Link:
Intromodel.dart
class IntroModel {
String? nameTitle;
String? description;
IntroModel({this.nameTitle, this.description});
IntroModel.fromJson(Map<String, dynamic> json) {
nameTitle = json['name_Title'];
description = json['description'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['name_Title'] = this.nameTitle;
data['description'] = this.description;
return data;
}
}
Intropage.dart
class IntroPage extends StatelessWidget {
final Isscar4;
IntroPage({
Key? key,
required this.Isscar4,
}) : super(key: key);
List<PageViewModel> listPagesViewModel = [];
List<IntroModel> models = [];
@override
Widget build(BuildContext context) {
List<dynamic> intro = fetchIntroApi(Isscar4);
intro.forEach((element) {
var element2 = element as Map<String, dynamic>;
var cd = IntroModel.fromJson(element2);
models.add(cd);
});
models.forEach((element) {
listPagesViewModel.add(PageViewModel(
title: element.nameTitle,
body: element.description,
image: Center(
child: Image.network(
Isscar4
? "https://c.tenor.com/75ffA59OV-sAAAAC/broke-down-red-car.gif"
: 'https://c.tenor.com/Jd1J0SSD_3sAAAAC/bike-bicycle.gif',
height: 175.0),
),
));
});
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/intro",
home: Scaffold(
body: IntroductionScreen(
next: ElevatedButton(
onPressed: () {},
child: Text(''),
),
pages: listPagesViewModel,
done: const Text('Done',
style: TextStyle(fontWeight: FontWeight.w600)),
onDone: () {
// When done button is press
},
),
));
}
List fetchIntroApi(bool bool) {
var four = bool;
if (four) {
var data =
'[ {"name_Title": "title name1","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"}, {"name_Title": "title name4","description": "description4"} ]';
return json.decode(data);
} else {
var data =
'[ {"name_Title": "title name","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"} ]';
return json.decode(data);
}
}
}
MainPage.dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// });
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/",
home: Scaffold(
body:
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
width: 100,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => IntroPage(Isscar4: true)),
);
},
child: RichText(
text: TextSpan(
text: 'CAR',
style: TextStyle(
letterSpacing: 3,
color: Colors.white,
fontWeight: FontWeight.w400),
children: [
TextSpan(
text: '4',
style: TextStyle(
fontSize: 25,
color: Colors.red,
fontWeight: FontWeight.bold))
],
)
// IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
),
),
),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
width: 100,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => IntroPage(Isscar4: false)),
);
},
child: RichText(
text: TextSpan(
text: 'BIKE',
style: TextStyle(
letterSpacing: 3,
color: Colors.white,
fontWeight: FontWeight.w400),
children: [
TextSpan(
text: '2',
style: TextStyle(
fontSize: 25,
color: Colors.red,
fontWeight: FontWeight.bold))
],
)
// IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
),
),
),
],
)
])));
}
MaterialApp Swithwidget(istrue) {
return MaterialApp(
initialRoute: "/intro",
home: Scaffold(
body: IntroPage(
Isscar4: istrue,
),
),
);
}
}
FullCode
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';
void main() {
runApp(
// For widgets to be able to read providers, we need to wrap the entire
// application in a 'ProviderScope' widget.
// This is where the state of our providers will be stored.
MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// });
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/",
home: Scaffold(
body:
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
width: 100,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => IntroPage(Isscar4: true)),
);
},
child: RichText(
text: TextSpan(
text: 'CAR',
style: TextStyle(
letterSpacing: 3,
color: Colors.white,
fontWeight: FontWeight.w400),
children: [
TextSpan(
text: '4',
style: TextStyle(
fontSize: 25,
color: Colors.red,
fontWeight: FontWeight.bold))
],
)
// IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
),
),
),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
width: 100,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => IntroPage(Isscar4: false)),
);
},
child: RichText(
text: TextSpan(
text: 'BIKE',
style: TextStyle(
letterSpacing: 3,
color: Colors.white,
fontWeight: FontWeight.w400),
children: [
TextSpan(
text: '2',
style: TextStyle(
fontSize: 25,
color: Colors.red,
fontWeight: FontWeight.bold))
],
)
// IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
),
),
),
],
)
])));
}
MaterialApp Swithwidget(istrue) {
return MaterialApp(
initialRoute: "/intro",
home: Scaffold(
body: IntroPage(
Isscar4: istrue,
),
),
);
}
}
class Hi extends StatelessWidget {
const Hi({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text("df"),
);
}
}
class IntroPage extends StatelessWidget {
final Isscar4;
IntroPage({
Key? key,
required this.Isscar4,
}) : super(key: key);
List<PageViewModel> listPagesViewModel = [];
List<IntroModel> models = [];
@override
Widget build(BuildContext context) {
List<dynamic> intro = fetchIntroApi(Isscar4);
intro.forEach((element) {
var element2 = element as Map<String, dynamic>;
var cd = IntroModel.fromJson(element2);
models.add(cd);
});
models.forEach((element) {
listPagesViewModel.add(PageViewModel(
title: element.nameTitle,
body: element.description,
image: Center(
child: Image.network(
Isscar4
? "https://c.tenor.com/75ffA59OV-sAAAAC/broke-down-red-car.gif"
: 'https://c.tenor.com/Jd1J0SSD_3sAAAAC/bike-bicycle.gif',
height: 175.0),
),
));
});
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/intro",
home: Scaffold(
body: IntroductionScreen(
next: ElevatedButton(
onPressed: () {},
child: Text(''),
),
pages: listPagesViewModel,
done: const Text('Done',
style: TextStyle(fontWeight: FontWeight.w600)),
onDone: () {
// When done button is press
},
),
));
}
List fetchIntroApi(bool bool) {
var four = bool;
if (four) {
var data =
'[ {"name_Title": "title name1","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"}, {"name_Title": "title name4","description": "description4"} ]';
return json.decode(data);
} else {
var data =
'[ {"name_Title1": "title name","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"} ]';
return json.decode(data);
}
}
}
class IntroModel {
String? nameTitle;
String? description;
IntroModel({this.nameTitle, this.description});
IntroModel.fromJson(Map<String, dynamic> json) {
nameTitle = json['name_Title'];
description = json['description'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['name_Title'] = this.nameTitle;
data['description'] = this.description;
return data;
}
}