skip to Main Content

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

Example Image

2

Answers


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

    Login or Signup to reply.
  2. 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 : –

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search