How to Add Dotted Line Dash in Flutter?

Flutter is a mobile application development framework for building beautiful native applications on Android and iOS in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. dotted line dash in flutter is a simple mobile app which generates beautiful user onboarding.

Line dash is a library that allows you to add a dashed line to any widget in Flutter. The library provides a simple API for creating various dotted line dash and outlines. This article explains how to use it.

This creates the directory and the files necessary for your new project. You can enter it into your editor of choice now, or use command line to navigate to it.

class MySeparator extends StatelessWidget {
  const MySeparator({Key? key, this.height = 1, this.color = Colors.black})
      : super(key: key);
  final double height;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth();
        const dashWidth = 10.0;
        final dashHeight = height;
        final dashCount = (boxWidth / (2 * dashWidth)).floor();
        return Flex(
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: dashWidth,
              height: dashHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.horizontal,
        );
      },
    );
  }
}

and use it const MySeparator()

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Container(
              height: 600,
              width: 350,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(16.0)),
              ),
              child: Flex(
                direction: Axis.vertical,
                children: [
                  Expanded(child: Container()),
                  const MySeparator(color: Colors.grey),
                  Container(height: 200),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In conclusion, we’ve learned that dotted line dash is a powerful tool in Flutter. It is easy to get started with and provides a robust set of frameworks that allow you to build fully-functional applications quickly.

We’re so glad you came along for the ride! And now that you know about how to make your own dash apps in Flutter, maybe you’ll be inspired to create something awesome.