CODEWITHSUNDEEP
dartflutter
Felix Teupke
Felix Teupke

Reputation: 61

Flutter first launch page

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!

Upvotes: 6

Views: 21015

Answers (6)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20231

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 :)

Upvotes: 1

BIS Tech
BIS Tech

Reputation: 19444

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()));
              },
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 3

FlutterDevs
FlutterDevs

Reputation: 479

enter image description here 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.

Upvotes: 0

Karim Mohamed
Karim Mohamed

Reputation: 117

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

Upvotes: 0

diegoveloper
diegoveloper

Reputation: 103421

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

Upvotes: 4

Danny Tuppeny
Danny Tuppeny

Reputation: 42343

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)

Upvotes: 6

Related Questions