drawing partial round-rect borders

Question

i want to be able to draw partial round-rect borders around a child widget: only the left, top, and right sides; only the left, bottom and right sides; and so on. this function comes tantalizingly close to doing what i want:

Widget roundRectBorderTop(Widget child, Color color, double cornerRadius,
 [double borderWidth = 1.0])
{
    final side = BorderSide(color:color, width:borderWidth);
    final bord = Border(left:side, top:side, right:side);
    final radi = BorderRadius.circular(cornerRadius);
    final data = BoxDecoration(border:bord, borderRadius:radi);
    return DecoratedBox(child:child, decoration:data);
}

alas, when i run this, it dies with the following assertion:

flutter: The following assertion was thrown during paint():
flutter: A borderRadius can only be given for uniform borders.
flutter: 'package:flutter/src/painting/box_border.dart':
flutter: Failed assertion: line 510 pos 12: 'borderRadius == null'

if i remove the borderRadius: parameter from the BoxDecoration object, then the code "works," but it draws right-angle corners, rather than round-rect corners, which is what i want.

does anybody know how to fix this?

Answer 1

You could simplify by having BorderRadius.only for decoration of a Container;

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.circular(20.0),
    )
  ),
  child: ...
)

Full working code for the screenshot below;

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Corners Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  ),
                ),
                padding: EdgeInsets.all(20.0),
                child: Text('Rounded Corners'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}