walk_line_container 0.0.5

walk_line_container: ^0.0.5 copied to clipboard

Usage #

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

Example #

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:walk_line_container/walk_line_container.dart';

void main() {
  runApp(const MaterialApp(
    title: 'ًWalk Line Container',
    home: WalkLineContainerScerrn(),
  ));
}

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

Getting started #

The package is very simple and easy to use

WalkLineContainer(
      width: 45,
      height: 100,
     angle: 90,
      child: null,
      colors: [Colors.red, Colors.orange],
      curve: Curves.bounceIn,
      duration: Duration(microseconds: 800),
      reverse: true,
      steps: [0.2, 0.6],
      thicken: 4,
    )

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