dotted_decoration 3.0.0 copy "dotted_decoration: ^3.0.0" to clipboard
dotted_decoration: ^3.0.0 copied to clipboard

Dotted line decoration is handly package to draw dotted divider, dotted border for rectangle, circle or rounded rectangle.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dotted Decoration'),
      ),
      body: SingleChildScrollView(
        child: Container(
            padding: EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                _getDecorationWidget('Line', <Decoration>[
                  DottedDecoration(
                      shape: Shape.line, linePosition: LinePosition.bottom),
                  DottedDecoration(
                      shape: Shape.line,
                      linePosition: LinePosition.left,
                      color: Colors.red),
                  DottedDecoration(
                      shape: Shape.line,
                      linePosition: LinePosition.top,
                      dash: <int>[5, 1]),
                  DottedDecoration(
                      shape: Shape.line, linePosition: LinePosition.right)
                ], <String>[
                  'Bottom Line',
                  'Left Line',
                  'Top Line',
                  'Right Line'
                ]),
                _getDecorationWidget('Box', <Decoration>[
                  DottedDecoration(shape: Shape.box),
                  DottedDecoration(
                    shape: Shape.box,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  DottedDecoration(
                      shape: Shape.box,
                      borderRadius:
                          BorderRadius.only(topLeft: Radius.circular(10)),
                      dash: <int>[2, 5],
                      strokeWidth: 2),
                  DottedDecoration(
                      shape: Shape.box, color: Colors.red, strokeWidth: 2),
                  DottedDecoration(
                    shape: Shape.box,
                    borderRadius: BorderRadius.circular(10),
                    backgroundColor: const Color(0xFFE3F2FD),
                  ),
                ], <String>[
                  'Box',
                  'Rounded Box',
                  'Custom Rounded Box',
                  'Colored Box',
                  'Box with background'
                ]),
                _getDecorationWidget('Oval', <Decoration>[
                  DottedDecoration(shape: Shape.circle),
                  DottedDecoration(shape: Shape.circle, dash: <int>[1, 4]),
                ], <String>[
                  'Oval',
                  'Oval with dotted outline'
                ])
              ],
            )),
      ),
    );
  }

  _getDecorationWidget(String title, List<Decoration> decorations,
      List<String> decorationStrings) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            title,
            style: TextStyle(color: Colors.black, fontSize: 20),
          ),
          Wrap(
            children: List.generate(
                decorations.length,
                (index) => Container(
                      width: 130,
                      margin: EdgeInsets.all(20),
                      padding: EdgeInsets.all(20),
                      decoration: decorations[index],
                      child: Text(
                        decorationStrings[index],
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                    )),
          )
        ],
      ),
    );
  }
}
152
likes
150
points
80.3k
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Dotted line decoration is handly package to draw dotted divider, dotted border for rectangle, circle or rounded rectangle.

Repository (GitHub)
View/report issues

License

BSD-2-Clause (license)

Dependencies

flutter

More

Packages that depend on dotted_decoration