splashscreen 1.3.5
splashscreen: ^1.3.5 copied to clipboard

A splashscreen package created as intro for any flutter application easily with a lot of customization

Splash Screen #

  • A splashscreen package to be used for an intro for any flutter application easily with a lot of customization

Currently Supported by awesome DPLYR #

image (alt)

  • DPLYR is a new generation of cloud platforms and aims to help developers in their road with open source contributions, and at the end we can say thanks.

Screenshots #

screenshot description (alt)

Usage #

Example

To use this package :

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

All Supported Projects by DPLYR #

  • Splash Screen - Flutter
    a flutter package created to show simple splashscreen

  • In App Call Alert - Flutter
    a flutter package created recently to show call alert with sound

  • File Manager
    a php project created to manage machines/servers through ftp servers

  • Countries Js
    a javascript project created for retrieving country details with flexibility.

  • Block temp mails
    a javascript api to prevent temporary emails from signing up on your website. Super easy to use

  • Disposable Emails List
    a python script to generate the temporary and spam doamins to prevent them and you can block them through this API Block temp mails

  • Basic CRM
    A crm that is developed with Node Js for entreprenurs who need a basic CRM with text replacment feature

  • Basic Finance
    A finance that is developed with Node Js

About DPLYR #

DPLYR is a SaaS tool that helps developers just like you to deploy their web apps more easily. It supports deploying Node.js apps with MongoDB, MySQL or PostgreSQL databases all for free. Go now to www.dplyr.dev and create a free account.

Created by Karim Mohamed #

285
likes
100
pub points
98%
popularity

Publisher

dplyr.dev

A splashscreen package created as intro for any flutter application easily with a lot of customization

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on splashscreen