banai_delayed_displays 1.0.0 copy "banai_delayed_displays: ^1.0.0" to clipboard
banai_delayed_displays: ^1.0.0 copied to clipboard

outdated

You can delay the display of widgets with gradient and offset animations. When your widgets are very performance-intensive and cause routing jumps to freeze, you can also pass in a placeholder to impr [...]

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:banai_delayed_displays/banai_delayed_displays.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }
  

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.pinkAccent,
        body: SizedBox(
          width: double.infinity,
          child: ListView(
            children:  [
              
              const BanaiDelayedDisplays(
                key: Key('1'),
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                key: const Key('2'),
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                key: Key('3'),
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                key: const Key('4'),
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),

              const BanaiDelayedDisplays(
                key: Key('6'),
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                key: const Key('7'),
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(0, 0.35),
                delay: const Duration(milliseconds: 600),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Center(
                      child: Text('delayed_displays_example'),
                    ),
                  ),
                ),
              ),


              Container(
                height: 100,
              ),

              const BanaiDelayedDisplays(
                fadeIn: true,
                from: Offset(0.35, 0.35),
                delay: Duration(milliseconds: 300),
                duration: Duration(milliseconds: 500),
                placelholder: Text(''),
                child: Center(
                  child: Text('delayed_displays_example'),
                ),
              ),

              BanaiDelayedDisplays(
                fadeIn: true,
                from: const Offset(-0.35, 0.35),
                delay: const Duration(milliseconds: 300),
                duration: const Duration(milliseconds: 500),
                placelholder: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.transparent,
                  ),
                ),
                child: Center(
                  child: Container(
                    width: 200,
                    height: 50,
                    color: Colors.blue,
                    child: const Text('delayed_displays_example'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
2
likes
0
pub points
50%
popularity

Publisher

verified publisherbanai.com.cn

You can delay the display of widgets with gradient and offset animations. When your widgets are very performance-intensive and cause routing jumps to freeze, you can also pass in a placeholder to improve performance.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on banai_delayed_displays