how to make border of container like this in flutter? - flutter

Question

I want to make a container border like this but don't know what should I use?

Answer 1

TRy following this code . You have to customize it more to suit your exact needs. Here we are using BoxDecoration properties to set every corner radius. Check at https://dartpad.dev/?id=61468d155191404e24d99404ebb297ea. This one matches the desgn consideration to a certain level but not exact. This one is simple , other wise to make exact the same as you shown you can use ClipPath.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(right: 16,left: 16,top: 16,bottom: 64),
height: MediaQuery.of(context).size.height*0.80,
width: MediaQuery.of(context).size.width-32,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(0),
bottomLeft: Radius.circular(MediaQuery.of(context).size.width*.4),
bottomRight: Radius.circular(32.0),
topRight: Radius.circular(0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(1),
offset: Offset(2, 2),
blurRadius: 10.0),
],
),
);
}
}