Make Intro View with Flutter

Опубликовано: 31 Октябрь 2024
на канале: iMProgrammer
260
5

In this tutorial, you'll learn how to make intro view with Flutter. A Flutter package for simple material design app intro screens with some cool animations.
How to Add Back Button at App Bar with Flutter & Dart
☞ https://morioh.com/p/0281057b8ccf
Top 10 Amazing Flutter chart libraries
☞ https://morioh.com/p/c214eaec953b
Flutter - State Management using PROVIDER
☞ https://morioh.com/p/60694d3f54ee

Features:

Easy addition of pages.

Circular page reveal.

Cool Animations.

Animation control, if the user stops sliding in the midway.

Skip button, for skipping the app intro.

Custom font selection.

Material Design.

Getting Started:

You should ensure that you add the intro_views_flutter as a dependency in your flutter project.

dependencies:

intro_views_flutter: '^2.8.0'


You should then run flutter packages get in your terminal so as to get the package.

Usage:

IntroViewsFlutter widget require a list of PageViewModel , and some other parameters. Refer the code below to create a PageViewModel page.

Final page = new PageViewModel(

pageColor: const Color(0xFF607D8B),

iconImageAssetPath: 'assets/taxi-driver.png',

iconColor: null,

bubbleBackgroundColor: null,

body: Text(

'Easy cab booking at your doorstep with cashless payment system',

),

title: Text('Cabs'),

mainImage: Image.asset(

'assets/taxi.png',

height: 285.0,

width: 285.0,

alignment: Alignment.center,

),

titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),

bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),

);


Now refer the code below to get the IntroViewsFlutter widget.

final Widget introViews = new IntroViewsFlutter(

[page],

onTapDoneButton: (){

//Void Callback

},

showSkipButton: true,

pageButtonTextStyles: new TextStyle(

color: Colors.white,

fontSize: 18.0,

fontFamily: "Regular",

),

);


What you’ll learn

build Intro Views Flutter

Are there any course requirements or prerequisites?

VS Code

Who this course is for:

Students
Mobile Developers
Flutter Learner

#Flutter #Dart #Morioh

Note: If you have any copyright issue with the content used in our channel or you find something that belongs to you, before you claim it to Youtube, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
👕 Merchandise: https://www.moteefe.com/store/developer?cp...
🌎 Social Network for Developers: https://morioh.com/