How to Make Dotted/Dash Border on Container in Flutter App

There is no provision of dotted or dashed borderline for containers in Flutter SDK yet. In this example, you can learn how to make border line for any kind of widget either its image, container, text on flutter. The output of this example:

Read this Also: How to Add Borders to Container Widget in Flutter

You need to add dotted_border plugin as dependencies on your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  dotted_border: ^1.0.7

Use the following Dart code example to draw a dash or dotted border on Container or on any kind of widget on Flutter.

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Dotted/Dash Border"), //appbar title
          backgroundColor: Colors.redAccent, //appbar color
        ),
        body: Container(
           padding: EdgeInsets.all(20), //padding of outer Container
           child: DottedBorder(
              color: Colors.black,//color of dotted/dash line
              strokeWidth: 3, //thickness of dash/dots
              dashPattern: [10,6], 
              //dash patterns, 10 is dash width, 6 is space width
              child: Container(  //inner container
                 height:180, //height of inner container
                 width: double.infinity, //width to 100% match to parent container.
                 color:Colors.yellow //background color of inner container
              ),
          )
        ),
    );
  }
}

This is an easy way you can draw dash/dotted border for container or any kind of widget on Flutter.