When the app opens up, I want the logo and app name to pop up, and pause it for a few seconds before redirecting to the next directory. Can anyone please help me because I'm new to flutter and have been stuck for awhile >_<

    import 'package:flutter/material.dart';
    
    class wlcPage extends StatelessWidget {
      const wlcPage({Key? key}) : super(key: key);
    
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Container(
              height: double.infinity,
              width: double.infinity,
              decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/appBckgrd.jpg'),
                    fit: BoxFit.cover
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const CircleAvatar(
                    radius: 80,
                    backgroundImage: AssetImage("images/logo.png"),
                  ),
                  Text('signhouse',
                    style: TextStyle(
                      fontFamily: 'OpenSans',
                      fontSize: 30,
                      fontWeight: FontWeight.normal,
                      letterSpacing: 1,
                      color: Colors.teal[700],
    
                    ),
                  ),
                ],
              ),
            ),
    
          ),
        );
      }
    }

CodePudding user response：

You can use the Future.delayed function to your advantage and make it wait for a couple of seconds and then use the Navigator.push() to show your other page.

CodePudding user response：

Please try below plugin to display logo and different style of text when app opens up. The duration property sets delay between the splash screen and target screen. Provider Duration in millisecond.

splash_screen_view: ^3.0.0

You can also try below code (without use of plugin) example with Timer to pause the screen for sometime

import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
  title: 'Splash Screen',
  theme: ThemeData(
    primarySwatch: Colors.green,
  ),
  home: MyHomePage(),
  debugShowCheckedModeBanner: false,
  );
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
  super.initState();
  Timer(Duration(seconds: 3),
    ()=>Navigator.pushReplacement(context,
                    MaterialPageRoute(builder:
                            (context) =>
                            SecondScreen()
                            )
                  )
    );
}
@override
Widget build(BuildContext context) {
  return Container(
  color: Colors.white,
  child:FlutterLogo(size:MediaQuery.of(context).size.height)
  );
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(title:Text("Data")),
  body: Center(
    child:Text("Home page",textScaleFactor: 2,)
  ),
  );
}
}