Flutter first launch page

Question

I'm currently working on a Flutter version of an android application and now want to implement the first launch page. It should only be displayed on the very first launch of the app after it has been installed on a device. I figured out how to do it for the android app, but I only have a basic knowledge of Flutter, so I'm asking this question. Does anyone know how to do this in Flutter in a simple way?

Thanks in advance for your help!

Obviously my question wasn't clear enough. I didn't mean a splash screen, I did mean a page that's only displayed on the very first launch of my App after install. — Felix Teupke, May 17 '18 at 11:35
What's the problem with that? You need to store somewhere that you showed the page already and if that setting is available, don't show it. — Günter Zöchbauer, May 17 '18 at 11:36
No, I don't want a splash screen. I want the app to launch an activity only on the very first launch of the app for a login. — Felix Teupke, May 17 '18 at 11:37
So how did you do it in Android? How does that not work with Flutter? What have you tried? — Günter Zöchbauer, May 17 '18 at 11:45
May this link will help you - https://stackoverflow.com/a/53032136/10545783 — Nikhat Shaikh, May 01 '19 at 09:08
You can go through https://stackoverflow.com/questions/49669025/flutter-splash-screen OR https://stackoverflow.com/a/53032136/1054 — Nikhat Shaikh, May 01 '19 at 09:13

score 6 · Answer 1 · answered May 19 '18 at 07:34

You could do this by having a separate route for your intro/app:

void main() {
  runApp(new MaterialApp(
    home: new MyIntroPage(),
    routes: <String, WidgetBuilder> {
      '/app': (BuildContext context) => new MyAppPage()
    },
  ));
}

In your intro page you could check a flag for whether the user has seen it (see here for some ideas on persisting data) and if so, just navigate straight to the app (for example like the _completeLogin function here)

score 4 · Answer 2 · answered Jul 04 '18 at 00:00

You could make the Splash screen in Dart but is not recommend because it can bore your users (you will use a fixed duration time) , so in my personal opinion I will go for a native splash screen in each platform.

Android

Modify the file launch_background.xml
Uncomment the bitmap item and put any item that you have in your mipmap or drawable folder
Change the color of your background in android:drawable item

iOS

Add your custom images into the Assets.xcassets folder
Modify the file LaunScreen.storyboard, change the background color, add and imageview, etc.

I created a post with all of the details about the Splash Screen in Flutter, you can take a look : https://medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548

If the fixed duration is the only problem, why not use a FutureBuilder? If the future has no error and data, then we render the SplashScreen widget. If it has an error, we can render the error page or exit the app. And when the data is ready, we can render the Home Page. — Roopak A Nelliat, Sep 03 '19 at 02:59

score 3 · Answer 3 · answered Feb 14 '19 at 11:26

First-time view Page with user input, It's sample code, you can get idea

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:reborn_next_job02/ui/LoginScreen.dart';
import 'package:reborn_next_job02/ui/splashScreen.dart';
import 'package:shared_preferences/shared_preferences.dart';

class Splash extends StatefulWidget {
  @override
  SplashState createState() => new SplashState();
}

class SplashState extends State<Splash> {
  Future checkFirstSeen() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool _seen = (prefs.getBool('seen') ?? false);
    if (_seen) {
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => new LoginScreen()));
    } else {
      prefs.setBool('seen', true);
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => new urlScreen()));
    }
  }

  @override
  void initState() {
    super.initState();
    new Timer(new Duration(seconds: 10), () {
      checkFirstSeen();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Text('Loading...'),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hello'),
      ),
      body: new Center(
        child: new Text('This is the second page'),
      ),
    );
  }
}

class IntroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Text('This is the intro page'),
            new MaterialButton(
              child: new Text('Gogo Home Page'),
              onPressed: () {
                Navigator.of(context).pushReplacement(
                    new MaterialPageRoute(builder: (context) => new Home()));
              },
            )
          ],
        ),
      ),
    );
  }
}

Could it be that copy/paste plus changing to a schoolbook-example were the cause of a non-working example you present here ? For example, the following is missing: SplashState-build needs a `MaterialApp` (instead of only Scaffold) otherwise you get an MediaQuery-error... And also, you call `urlscreen()` instead of `Home` in your checkFirstSeen() method etc. Would be great if you changed your example somewhat to a working example. But other than that , I find it a straightforward example... — iKK, Feb 23 '19 at 10:00
Also, your `prefs.setBool('seen', true);` should be to `false` (otherwise the intro-screen keeps cropping up)... — iKK, Feb 23 '19 at 10:15

Mahesh Jamdade · Answer 4 · 2019-09-03T05:27:56.633

I don't really Know the exact Logic but This is How I would implement it, I will be just explaining you the logic the code below is not syntactically correct

lets call your one time view page as intro page I will maintain an integer variable in that intro page

int counter;

When for the first Time the intro page loads I will initialize

 counter = sharedPreferencevalue // defaults to 0 when App is fresh installed

and check if counter==0

 if yes
   load the intro page 
   counter++;
   store counter in SharedPreference; //overwrite the default value
 else
   go to Home

simply increment the variable and store the value of that variable locally using SharedPreference

for those who don't know about Shared Preferences, it allows a Flutter application (Android or iOS) to save settings, properties, data in the form of key-value pairs that will persist even when the user closes the application.

hope this Helps :)

Boolean variable could also help. Any specific reason why int was chosen? — Roopak A Nelliat, Sep 03 '19 at 02:57
yes boolean would help too, but incase you want the first page to be opened for the first two times only in that case boolean wont work,hope you get it. — Mahesh Jamdade, Sep 03 '19 at 05:24

score 0 · Answer 5 · edited Jul 05 '18 at 06:17

0

Doesn't help you in remove back button but i think it will help you in making splash screen I developed a package the Link

edited Jul 05 '18 at 06:17

sr9yar

4,850
5
53
59

answered Jul 04 '18 at 19:43

Karim Mohamed

107
3
15

score 0 · Answer 6 · answered Feb 05 '19 at 06:11

0

Please find the repo.

If you want to take a look at Flutter you can find some good examples at our company’s Github page. Also, you can check our company's page FlutterDevs.

answered Feb 05 '19 at 06:11

FlutterDevs

479
6
8

1

loved the animation great work but this certainly doesn't answer the Question – Mahesh Jamdade Mar 11 '19 at 11:34

Flutter first launch page

6 Answers6