Flutter Welcome Screen With PageView

Do not reinvent the wheel. Right? . So my instinct the first time I had to create a welcome screen on a flutter project was to use a package. But the ride soon became rough as I had to customize the package to fit my exact need. I soon realized it was better to just create one that would fit that need, I didn’t have to reinvent the wheel though. But I found just the perfect wheel to beautify.

So here we’ll start with doing this simple welcome screen.

Yes, simple because it doesn’t do justice to the endless possibilities of what we can do with Flutter PageView. And I look forward to coming back with something more complex. But we definitely don’t need to be too quick in jumping into packages.

So let’s start…..

Step #1 : Create a flutter project. You can find instruction here.

Step #2 : Replace content of mail.dart with

Material app takes a number of arguments but we have only specified 3,

debugShowCheckedModeBanner: false

hides the debug tag on the build app.

title: 'Welcome Screen'

Means what it says.. Titles appear above the task manager’s app snapshots which are displayed when the user presses the “recent apps” button.

home: WelcomeScreen()

home: specifies the view user sees first when app loads. This is like the homepage of websites. Here we’ve specified a widget(everything in flutter is a widget even a complete view) which we will create shortly.

Just before we create the WelcomeScreen(), let us create the content of our welcome screen.

Step #3: Download any number of png images you want in your slide. preferably from undraw.co or you can use the one in my own project on github [assets/images].

Step #4: Create a folder in your project’s root folder called assets then create a folder in assets folder called images and copy your downloaded images into the images folder.

Step #5: Open your projects pubspec.yaml file and make sure flutter knows you have files that need to be read by adding. I’ve named my files 1.png, 2.png, 3.png, 4.png, 5.png.

NOTE: In a real project you’ll want to make sure these names make sense and also describes the actual images.

assets:
 - assets/images/1.png
 - assets/images/2.png
 - assets/images/3.png
 - assets/images/4.png
 - assets/images/5.png

right after the line that reads.

uses-material-design: true

Note indentation in this file.

Step #6 : Create a new file in your lib folder and name it items.dart. Paste the following code.

Step #7: Create a Stateful widget in your main.dart right after your MyApp class, name it WelcomeScreen. Your code should look like this.

class WelcomeScreen extends StatefulWidget { 
 @override   _WelcomeScreen createState() => _WelcomeScreenState(); }
class _WelcomeScreen extends State<WelcomeScreen> {
 @override
 Widget build(BuildContext context) {
   return Container();
 }
}

read about flutter stateful widget here

Step #8 : import your items.dart into your main.dart

import 'package:welcome_screen/items.dart';

Now its time to loop through our items to create the view.

add the following code to your __WelcomeScreenState class, right before @override

Well… we’ve created the widget that forms our slide.. Its time use it to create the actual slide.

We will create our current page which would be 0 (first page). and also our pageView Controller.

Right after the code snippet above, before our @override add

double currentPage = 0.0;
final _pageViewController = new PageController();

Yes, I said its 0 but we have 0.0. This is because we’ll have an indicator and we want our indicator to change as soon as we swipe.

Step #9 : Currently, our build function in _WelcomeScreenState class returns Container();

Let’s replace that with the next code snippet

Now its time to add our final piece which is our indicator.

Here we generate our indicators based on the number of slide items that we have and also set the color based on the current page. we use .round because our currentPage will move from 0.0 to 1.0 and 1.0 to 2.0 and so on.. but we want our color to change as soon as the movement starts.

Add the code snippet right after the loop that creates the slides. That is before our

double currentPage = 0.0;

Step #10: Let’s place indicator where it ought to be….

Inside our stack children right after our pageview.builder(). Place this final piece of code.

Step #11: Run your code.

Conclusion: There are cases where packages give you exactly what you need. However in cases where packages are not flexible enough. You can definitely build on there and add more customized features.

Complete code here .