Flutter starts the screen using Lottie animation

The cat said

I came to Chongqing on a business trip. It is a beautiful city. Walking in the street, I feel like climbing a mountain.

Thanks to chongqing friends in the group to take time out of the party.

To start

Lottie is an animation library that provides a platform for creating cool motion pictures.

In fact, as a front end or a little bit of art, animation, geometry mathematics.

lottiefiles.com/

Github.com/airbnb/lott…

Remember to forward, cat brother will present more good Flutter articles ~~~~

Wechat Flutter study group ducafecat

The original

Mamuseferha.medium.com/how-to-use-…

code

Github.com/debbsefe/Lo…

reference

lottiefiles.com/
Github.com/airbnb/lott…
Github.com/debbsefe/Lo…

The body of the

Splash screens are very common when building mobile applications. They are usually static screens that are displayed at the beginning of the application. This screen can help you tell your users what your app is about by displaying your app logo or app name.

If you want to go one step further and really grab the user’s attention, consider using animated images on the splash screen. Displaying an animated Image with Lottie is as simple as using the Image widget in your application.

start

First, create a new Flutter project.

flutter pub add lottie
Copy the code

Create the splash screen widget by pasting the following code.

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key key}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: (5)),
      vsync: this,); }@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Lottie.asset(
        'assets/splash_lottie.json',
        controller: _controller,
        height: MediaQuery.of(context).size.height * 1,
        animate: true, onLoaded: (composition) { _controller .. duration = composition.duration .. forward().whenComplete(() => Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => HomePage()), )); },),); }}Copy the code

The Splash Screen widget is a stateful widget that holds Lottie files in its build method. The animation controller is created in initState and used in the controller properties.

To navigate to the next page after the animation is complete, use the onLoaded callback with Lottie position. This allows you to have more information and control over Lottie files.

onLoaded: (composition) { _controller .. duration = composition.duration .. forward().whenComplete(() => Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => HomePage()),)); },Copy the code

When the animation is complete, navigate to the next page.

I added a home page widget to the code that the splash screen navigates to.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Homepage'))); }}Copy the code

Simple text widget centered on scaffold.

Now you can move on to creating more visually appealing applications for your users.

Don’t forget to add the Lottie file as an asset to pubspec.yaml, otherwise the animation will not show. You can also find the full project on GitHub.

Github.com/debbsefe/Lo…

The elder brother of the © cat

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Translation of strAPI manual

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…