如何在 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),
          ],
 
        ),
      
    );
  }
}