Flutter Border/BorderSide hides content

user_7355988 0
Viewed 732

This is working box with rounded corner on the bottom left corner:

Container(
    decoration: BoxDecoration(
         // border: Border(
         //   right: BorderSide(
         //     color: Colors.red,
         //     width: 2,
         //   ),
         // ),
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10.0)),
      color: Colors.grey,
    ),
    child: new Column(
        children: <Widget>[
        new Padding(
            padding: EdgeInsets.only(top: 5, bottom: 5),
            child: new Text("......"))
        ],
        ))

If I uncomment the above 6 lines, the content disappears, but no top border appears.

What am I doing wrong?

flutter-layout
1 Answers

You can copy paste run full code below
This violate rule in framework's box_border.dart

assert(borderRadius == null, 'A borderRadius can only be given for uniform borders.');

You can use ClipRRect's borderRadius
code snippet

ClipRRect(
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10.0)),
        child: Container(
            decoration: BoxDecoration(
               border: Border(
                 right: BorderSide(
                   color: Colors.red,
                   width: 2,
                 ),
               ),                 
              color: Colors.grey,
            ),

working demo

enter image description here

full code

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ClipRRect(
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10.0)),
        child: Container(
            decoration: BoxDecoration(
               border: Border(
                 right: BorderSide(
                   color: Colors.red,
                   width: 2,
                 ),
               ),
              //borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10.0)),
              color: Colors.grey,
            ),
            child: Column(
              children: <Widget>[
                Padding(
                    padding: EdgeInsets.only(top: 5, bottom: 5),
                    child: Text("......"))
              ],
            )),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
user_21795710
Related