Add Dotted Border to a container in Flutter

To add a dotted border to a container in Flutter, you can use the DottedBorder widget. This widget is part of the dotted_border Package, which means you need to import it in your Flutter code like this:



import 'package:dotted_border/dotted_border.dart';

Use Control + . to automatically resolve the dependency. This is equivalent to adding Package to Pubspec.yaml file.

Here is the output from this example.

Here is the code from main.dart file on using the DottedBorder widget.




import 'package:flutter/material.dart';

import 'package:dotted_border/dotted_border.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @
override

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: DottedBorder(
            color: Colors.black,
            strokeWidth: 1,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.green,
            ),
          ),
        ),
      ),
    );
  }
}

Know more about this package from here, dotted_border | Flutter Package (pub.dev)

I hope this helps! Let me know if you have any questions.

Thanks,

Srikanth

Add Dotted Border to a container in Flutter

0 Comments

Recent Comments