How achieve this type ui in flutter. I was tryed dotted package But I can’t get that curved Dotted
2
You can use Dotted line in flutter to achieve your funcationality.
With the help of borderRadius property of container you can easily created this border by using Container.
borderRadius
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 : –
Click here to cancel reply.
2
Answers
You can use Dotted line in flutter to achieve your funcationality.
With the help of
borderRadius
property of container you can easily created this border by usingContainer
.Complete Code : –
Output : –