splashscreen 1.3.0 splashscreen: ^1.3.0 copied to clipboard
A small splashscreen used for an intro for any flutter application easily using
Splash Screen #
- A small Splash Screen used for an intro for any flutter application easily using
For iOS And Android #
- It 's Now Very Simple And Easy To Use
- Coming Soon Will Add A Greater Functions
- For Any information Send Message To Me On => karim@dplyr.dev
This repo has been unarchived now and we'll start accepting issues and pull requests now, thank you #
ScreenShot #
Usage #
To use this package :
- add the dependency to your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
splashscreen:
How to use #
new SplashScreen(
seconds: 14,
navigateAfterSeconds: new AfterSplash(),
title: new Text('Welcome In SplashScreen'),
image: new Image.asset('screenshot.png'),
backgroundColor: Colors.white,
styleTextUnderTheLoader: new TextStyle(),
photoSize: 100.0,
loaderColor: Colors.red
);
Example #
As time based...
import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
void main(){
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new SplashScreen(
seconds: 14,
navigateAfterSeconds: new AfterSplash(),
title: new Text('Welcome In SplashScreen',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0
),),
image: new Image.network('https://i.imgur.com/TyCSG9A.png'),
backgroundColor: Colors.white,
styleTextUnderTheLoader: new TextStyle(),
photoSize: 100.0,
onClick: ()=>print("Flutter Egypt"),
loaderColor: Colors.red
);
}
}
class AfterSplash extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Welcome In SplashScreen Package"),
automaticallyImplyLeading: false
),
body: new Center(
child: new Text("Done!",
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0
),),
),
);
}
}
As future based...
import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
void main(){
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
Future<Widget> loadFromFuture() async {
// <fetch data from server. ex. login>
return Future.value(new AfterSplash());
}
@override
Widget build(BuildContext context) {
return new SplashScreen(
navigateAfterFuture: loadFromFuture(),
title: new Text('Welcome In SplashScreen',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0
),),
image: new Image.network('https://i.imgur.com/TyCSG9A.png'),
backgroundColor: Colors.white,
styleTextUnderTheLoader: new TextStyle(),
photoSize: 100.0,
onClick: ()=>print("Flutter Egypt"),
loaderColor: Colors.red
);
}
}
class AfterSplash extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Welcome In SplashScreen Package"),
automaticallyImplyLeading: false
),
body: new Center(
child: new Text("Done!",
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0
),),
),
);
}
}
Animate the main image with the hero animation #
The main image has this tag attached to it splashscreenImage
. Add it to whatever page you'll navigate to. This will animate the main Image to the same image you put in another page
Adding a custom page tranistion #
You can use the pageRoute
to do just this. Here's an example
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new SplashScreen(
seconds: 14,
title: new Text('Welcome In SplashScreen'
),
image: new Image.network('https://flutter.io/images/catalog-widget-placeholder.png'),
backgroundColor: Colors.white,
photoSize: 100.0,
loaderColor: Colors.red,
pageRoute: _createRoute()
);
}
}
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}