Introduction Screens using flutter

How to build an introduction screen using flutter in a simple way

Introduction Screens using flutter

First of all, add this dependency to pubspec.yaml file :

introduction_screen: ^2.1.0

Then in the same file add this asset: after add folder named assets and inside it folder named images

assets:
— assets/images/img2.png
— assets/images/img3.png
— assets/images/fullScreen.jpg
— assets/images/appstore.png
— assets/images/appLogo.png
— assets/images/main_bottom.png
— assets/images/main_top.png

The main file should be like this :

import ‘package:flutter/material.dart’;
import ‘package:introduction/welcomeScreen.dart’;

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const WelcomeScreen(),
);
}
}

And here you are the code of the welcome screen :

// ignore_for_file: file_names
import ‘package:flutter/foundation.dart’;
import ‘package:flutter/material.dart’;
import ‘package:introduction/homeScreen.dart’;
import ‘package:introduction_screen/introduction_screen.dart’;

class WelcomeScreen extends StatefulWidget {
const WelcomeScreen({Key key}) : super(key: key);

@override
_WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
bool firstOpen = true;

_onIntroEnd(context) async {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const HomeScreen()));
}

_buildFullScreenImage() {
return Container(
margin: const EdgeInsets.all(22),
child: Image.asset(
‘assets/images/appLogo.png’,
fit: BoxFit.contain,
height: double.infinity,
width: double.infinity,
alignment: Alignment.topCenter,
),
);
}

_buildImage(String assetName, [double width = 350]) {
return Image.asset(‘assets/images/$assetName’, width: width);
}

@override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
if (!firstOpen) {
_onIntroEnd(context);
}
});
}

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
var pageDecoration = const PageDecoration(
titleTextStyle: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
bodyTextStyle: TextStyle(fontSize: 19.0),
descriptionPadding: EdgeInsets.all(16),
pageColor: Colors.amber,
imagePadding: EdgeInsets.zero,
);

return firstOpen
? IntroductionScreen(
globalBackgroundColor: Colors.amber,
globalHeader: Align(
alignment: Alignment.topRight,
child: SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 16, right: 16),
child: _buildImage(‘appLogo.png’, 50),
),
),
),
pages: [
PageViewModel(
title: “Coins Trap”,
body:
“Lorem Ipsum is simply dummy text of the printing and typesetting industry, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.”,
image: _buildFullScreenImage(),
decoration: pageDecoration.copyWith(
contentMargin: const EdgeInsets.symmetric(horizontal: 16),
fullScreen: true,
bodyFlex: 2,
imageFlex: 3,
),
),
PageViewModel(
title: ‘Save your money’,
body:
‘by using this app you will be updated about coins prices’,
image: _buildImage(‘img2.png’),
decoration: pageDecoration,
),
PageViewModel(
title: ‘Save Your time’,
body:
‘don\’t lose the time to now when you have to buy or sell coins’,
image: _buildImage(‘img3.png’),
decoration: pageDecoration,
),
],
onDone: () => _onIntroEnd(context),
onSkip: () =>
_onIntroEnd(context), // You can override onSkip callback
showSkipButton: true,
skipFlex: 0,
nextFlex: 0,
skip: const Text(
‘Skip’,
style: TextStyle(color: Colors.white),
),
next: const Icon(
Icons.arrow_forward,
color: Colors.white,
),
done: const Text(‘Done’,
style: TextStyle(
fontWeight: FontWeight.w600, color: Colors.white)),
controlsMargin: const EdgeInsets.all(16),
controlsPadding: const EdgeInsets.all(4),
dotsDecorator: const DotsDecorator(
size: Size(10.0, 10.0),
color: Colors.white,
activeSize: Size(22.0, 10.0),
activeColor: Colors.amber,
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
),
),
dotsContainerDecorator: const ShapeDecoration(
color: Colors.black54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
),
)
: WillPopScope(
onWillPop: () async => false,
child: Scaffold(
body: SizedBox(
height: size.height,
width: double.infinity,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
child: Image.asset(
‘assets/images/main_top.png’,
width: size.width * 0.3,
),
),
Positioned(
bottom: 0,
left: 0,
child: Image.asset(
‘assets/images/main_bottom.png’,
width: size.width * 0.2,
),
),
Center(
child: Image.asset(
‘assets/images/appstore.png’,
width: size.width * 0.4,
),
),
],
),
),
),
);
}
}

The home screen code :

// ignore_for_file: file_names
import ‘package:flutter/material.dart’;

class HomeScreen extends StatefulWidget {
const HomeScreen({Key key}) : super(key: key);

@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.amber,
child: Center(
child: Text(
‘Home Screen’,
style: Theme.of(context)
.textTheme
.headline3
.copyWith(color: Colors.black),
)),
),
);
}
}

Note: you have to see inter the lesson on youtube to be this code clear

https://www.youtube.com/c/CodeWithAmmar

I’ll be happy to follow me on my all accounts :

Twitter: https://twitter.com/codewithammar/​​​ Facebook: https://m.facebook.com/codewithammar/​​​ Instagram: https://instagram.com/codewithammar/​​​ Telegram: https://t.me/codewithammar/​​

Mobile Apps development instructor :

Amar Awni