Flutter only top, right, left border with rounded top right and top left corner

Question

I need to create a top, right, left border with rounded top right and top left corner. I could create it with a bottom border I can't remove. Here is what I could do:

I just need to remove this bottom border.

Code of the component:

class Tile extends StatelessWidget {    
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(
            30,
          ),
          topLeft: Radius.circular(
            30,
          ),
        ),
        border: Border(
          left: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
          right: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
          top: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
          bottom: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
        ),
      ),
      child: const ExpansionTile(
        collapsedTextColor: kNotificationTileCollapsedTextColor,
        textColor: kNotificationTileExpandedTextColor,
        trailing: SizedBox.shrink(),
        title: Center(
          child: Text(
            'Title',
            style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
          ),
        ),
        children: <Widget>[
          ListTile(
            title: Text('data'),
          ),
        ],
      ),
    );
  }
}

If I remove the bottom Border it says "A borderRadius can only be given for a uniform Border."

What can I do? Thank you.

Answer 1

A workaround is to put a line over the bottom border with the same color of the background. You can achieve this using Stack and Positioned widgets. Here is a sample:

import 'package:flutter/material.dart';

const kBorderColor = Colors.blue;
const kNotificationTileCollapsedTextColor = Colors.blue;
const kNotificationTileExpandedTextColor = Colors.blue;

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Center(
            child: Stack(
          children: [
            Tile(),
            Positioned(
              child: Container(
                height: 2,
                color: Colors.black,
              ),
              bottom: 0,
              left: 0,
              right: 0,
            )
          ],
        )),
      ),
    );
  }
}

class Tile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(
            30,
          ),
          topLeft: Radius.circular(
            30,
          ),
        ),
        border: Border(
          left: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
          right: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
          top: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
          bottom: BorderSide(
            width: 1,
            color: kBorderColor,
            style: BorderStyle.solid,
          ),
        ),
      ),
      child: const ExpansionTile(
        collapsedTextColor: kNotificationTileCollapsedTextColor,
        textColor: kNotificationTileExpandedTextColor,
        trailing: SizedBox.shrink(),
        title: Center(
          child: Text(
            'Title',
            style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
          ),
        ),
        children: <Widget>[
          ListTile(
            title: Text('data'),
          ),
        ],
      ),
    );
  }
}