Flutter DrawerHeaderを角丸にするサンプル
環境
Windows11 pro 64bit
Flutter 3.3.7
構文
borderRadius: BorderRadius.circular(xxx),
DrawerHeaderを角丸にするには、BoxDecorationを使います。
作成方法
1.引数「decoration」にBoxDecorationを指定します。
decoration: BoxDecoration(xxx
2.BoxDecorationの引数「borderRadius」に、「BorderRadius.circular(/*丸み*/)」を指定します。
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(xxx),
),
使用例
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(40),
),
child: Container(),
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(40),
),
child: Container(),
),
],
),
),
),
);
}
@override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar(), drawer: Drawer( child: ListView( children: [ DrawerHeader( decoration: BoxDecoration( color: Colors.yellow, borderRadius: BorderRadius.circular(40), ), child: Container(), ), ], ), ), ), ); }