Flutter : border and borderRadius cannot use together-CodePudding

I trying to create the layout like below image. But when I add borderRadius to curve Container, error appear

Container(
  height: 40,
  width: 40,
  decoration: BoxDecoration(
    color: Colors.black,
    border: Border(
      bottom: BorderSide(width: 1, color: Color(0xFF1A87EF)),
      left: BorderSide(width: 1, color: Color(0xFF1A87EF)),
    ),
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(100)
    )
  ),
  child: Icon(Icons.settings, color: Color(0xFF1A87EF), size: 20,),
),

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during paint():
A borderRadius can only be given for a uniform Border.

CodePudding user response：

just use BorderRaduis

Container(
        height: 40,
        width: 40,
        decoration: BoxDecoration(
          color: Colors.black,
          border: Border.all(color: const Color(0xFF1A87EF), width: 1.0),
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(50),
          ),
        ),
        child: const Icon(
          Icons.settings,
          color: Color(0xFF1A87EF),
          size: 20,
        ),
      ),

CodePudding user response：

What you are asking is not possible just with border as you are required to pass all BorderSide(top,bottom,left,right) if you want to use borderRadius Property and all BorderSide should be same.

There is one other way to do that. You can use Stack and clip it. See the code below, it does exactly what you want but with stack

import 'package:flutter/material.dart';

class TestView extends StatelessWidget {
  const TestView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Column(
        children: [
          Stack(
            alignment: Alignment.topRight,
            children: [
              Positioned(
                bottom: 0,
                left: 0,
                child: Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    border: Border.all(
                      color: const Color(0xFF1A87EF),
                      width: 3,
                    ),
                    borderRadius: BorderRadius.circular(100),
                  ),
                  alignment: Alignment.bottomLeft,
                  child: const Padding(
                    padding: EdgeInsets.all(15),
                    child: Icon(
                      Icons.settings,
                      color: Color(0xFF1A87EF),
                      size: 20,
                    ),
                  ),
                ),
              ),
              Container(
                height: 50,
                width: 100,
                color: Colors.white,
              ),
              Container(
                height: 100,
                width: 50,
                color: Colors.white,
              ),
            ],
          ),
        ],
      ),
    );
  }
}