How to create like that type dashed border line in flutter?

Question

How achieve this type ui in flutter. I was tryed dotted package But I can't get that curved Dotted

Answer 1

With the help of borderRadius property of container you can easily created this border by using Container.

Complete Code : -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 460,
              width: 460,
              color: Colors.blue[100],
              child: Column(children: [
                Row(
                  children: [
                    for (int i = 0; i < 10; i++) ...[
                      Container(
                        height: 10,
                        width: (i == 0 || i == 9) ? 25 : 40,
                        margin: EdgeInsets.only(right: i == 9 ? 0 : 10),
                        decoration: BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(i == 0 ? 0 : 10),
                                bottomRight: Radius.circular(i == 9 ? 0 : 10))),
                      )
                    ],
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        for (int i = 0; i < 10; i++) ...[
                          Container(
                            height: (i == 0 || i == 9) ? 15 : 40,
                            width: 10,
                            margin: EdgeInsets.only(bottom: i == 9 ? 0 : 10),
                            decoration: BoxDecoration(
                                color: Colors.black,
                                borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(i == 0 ? 0 : 10),
                                    bottomRight:
                                        Radius.circular(i == 9 ? 0 : 10))),
                          )
                        ],
                      ],
                    ),
                    const Text("Photos"),
                    Column(
                      children: [
                        for (int i = 0; i < 10; i++) ...[
                          Container(
                            height: (i == 0 || i == 9) ? 15 : 40,
                            width: 10,
                            margin: EdgeInsets.only(bottom: i == 9 ? 0 : 10),
                            decoration: BoxDecoration(
                                color: Colors.black,
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(i == 0 ? 0 : 10),
                                    bottomLeft:
                                        Radius.circular(i == 9 ? 0 : 10))),
                          )
                        ],
                      ],
                    ),
                  ],
                ),
                Row(
                  children: [
                    for (int i = 0; i < 10; i++) ...[
                      Container(
                        height: 10,
                        width: (i == 0 || i == 9) ? 25 : 40,
                        margin: EdgeInsets.only(right: i == 9 ? 0 : 10),
                        decoration: BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(i == 0 ? 0 : 10),
                                topRight: Radius.circular(i == 9 ? 0 : 10))),
                      )
                    ],
                  ],
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}

Output : -

Answer 2

You can use Dotted line in flutter to achieve your funcationality.