The splash screen is the best way to introduce your app to the users. You can add a custom splash screen to your flutter app with duration to display. In this example, we are going to show you the easiest way to create your own splash screen without depending on any packages.
- assets/images/
- —– logo.png
- lib/
- —– main.dart
- —– splash_screen.dart
- —– home.dart
flutter:
# Find this line and add the line below
uses-material-design: true
#leave this line as it is.
assets:
- assets/images/
#be careful of intent otherwise it will not work.
import 'package:flutter/material.dart';
import 'package:splashscreen/splash_screen.dart';
//importing splash_screen.dart file
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SplashScreen(),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Home extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _Home();
}
}
class _Home extends State<Home>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Home Page")
),
body: Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height,
//making container height equal to verticle hight.
width:MediaQuery.of(context).size.width,
//making container width equal to verticle width.
child:Text("Hello World !", style: TextStyle(
fontSize: 30,
),)
),
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'home.dart';
class SplashScreen extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _SplashScreen();
}
}
class _SplashScreen extends State<SplashScreen>{
int splashtime = 3;
// duration of splash screen on second
@override
void initState() {
Future.delayed(Duration(seconds: splashtime), () async {
Navigator.pushReplacement(context, MaterialPageRoute(
//pushReplacement = replacing the route so that
//splash screen won't show on back button press
//navigation to Home page.
builder: (context){
return Home();
}));
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body:Container(
alignment: Alignment.center,
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
//vertically align center
children:<Widget>[
Container(
child:SizedBox(
height:200,width:200,
child:Image.asset("assets/images/logo.png")
),
),
Container(
margin: EdgeInsets.only(top:30),
//margin top 30
child:Text("Smart Chat Bot", style: TextStyle(
fontSize: 30,
),),
),
Container(
margin:EdgeInsets.only(top:15),
child:Text("Version: 1.0.0", style:TextStyle(
color:Colors.black45,
fontSize: 20,
)),
),
]
)
)
);
}
}
Splash Screen on App Startup | Auto redirects to Home Page after 3 second |
In this way, you can make your own Splash Screen with the Duration of its auto-hide and navigate to the Home page.
Please Wait...
No any Comments on this Article