walk_line_container 0.0.11

walk_line_container: ^0.0.11 copied to clipboard

Usage #

These packages help add vitality to destinations, and you can use them for anything

Getting started #

The package is very simple and easy to use

class WalkLineContainerScerrn extends StatefulWidget {
  const WalkLineContainerScerrn({super.key});
  @override
  State<WalkLineContainerScerrn> createState() => _WalkLineContainerScerrnState();
}
class _WalkLineContainerScerrnState extends State<WalkLineContainerScerrn> {

  int counter = 0;
  Timer? timer;
  Random random = Random();
  List str = ["😀","😁","😂","🤣","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","🥰"];

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(const Duration(milliseconds: 800), (Timer t) {
      setState(() {
        counter++;
      });
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  Color getRandomColor() =>
      Color.fromARGB(
        255,
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate:
        const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemCount: 36,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8),
            child: WalkLineContainer(
                colors: [
                  getRandomColor(),
                  getRandomColor(),
                  getRandomColor(),
                  getRandomColor(),
                  getRandomColor()
                ],
                width: 150,
                height: 150,
                thicken: 10,
                angle: random.nextDouble() * 360,
                reverse: index % 2 == 0 ? true : false,
                curve: index % 2 == 0 ? Curves.bounceIn : Curves.bounceOut,
                child: Text(
                  str[(counter + index) % str.length],
                  style: const TextStyle(fontSize: 50),
                )),
          );
        },
      ),
    );
  }
}

About Package #

This package enables you to create a frame that moves along the edges of the container and can be controlled as you like