Onboarding UI Screen
...........................................................................................................................................................................................................................
Example :#1 []
Example :#1 []
Install Library
https://pub.dev/packages/introduction_screen/install
introduction_screen: ^1.0.9
Code Here
import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: IntroductionScreen(
pages: [
PageViewModel(
title: 'A reader lives a thousand lives',
body: 'The man who never reads lives only one',
image: buildImage('assets/images/dog.jpg'),
decoration: getDecorations(),
),
PageViewModel(
title: 'A reader lives a thousand lives',
body: 'The man who never reads lives only one',
image: buildImage('assets/images/dog.jpg'),
decoration: getDecorations(),
),
PageViewModel(
title: 'A reader lives a thousand lives',
body: 'The man who never reads lives only one',
image: buildImage('assets/images/dog.jpg'),
decoration: getDecorations(),
),
],
done: Text('Read'),
onDone: () {},
showSkipButton: true,
skip: Text('Skip'),
skipFlex: 0,
nextFlex: 0,
next: Icon(Icons.arrow_forward),
dotsDecorator: gotdotsDecorator(),
// isProgress: false, //bubble disappear
// isProgressTap: false, // Bubble will be not work if click
//showNextButton: false,
//freeze: true, // user cannot swip left or right
animationDuration: 1000, //button will be work
),
);
}
Widget buildImage(String path) {
return Center(
child: Image.asset(path, width: 450),
);
}
PageDecoration getDecorations() {
return PageDecoration(
titleTextStyle: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
bodyTextStyle: TextStyle(fontSize: 25),
descriptionPadding: EdgeInsets.all(16).copyWith(bottom: 0),
imagePadding: EdgeInsets.all(24),
pageColor: Colors.white);
}
DotsDecorator gotdotsDecorator() {
return DotsDecorator(
activeColor: Colors.orange,
size: Size(15, 15),
activeSize: Size(22,10),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24)
),
);
}
}
Happy Coding :)
...........................................................................................................................................................................................................................
Example :#2 [ Slider ]
Example :#2 [ Slider ]
https://pub.dev/packages/carousel_pro/install
carousel_pro: ^1.0.0
Happy Coding :)
...........................................................................................................................................................................................................................
Example :#3 []
Example :#3 []
Happy Coding :)
No comments:
Post a Comment