【Flutter】Widgetに角丸の枠線をつける【BoxDecoration】

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

FlutterでWidgetをもっとクールに！おしゃれにしたいと誰もが思うのですが、今日はWidgetに角丸の枠線をつける方法を紹介します。

動作環境

mac 10.14.1
Android Studio 3.2
flutterSDK 1.0.0
iOS Simulator 10.0

動作環境

mac 10.14.1

Android Studio 3.2

flutterSDK 1.0.0

iOS Simulator 10.0

角丸枠線をレッツトライ

ContainerのdecorationにカスタムのBoxDecorationクラスを与えることでできました。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Container(
        color: Colors.white,
        child: Container(
          margin: EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                Expanded(child: Container(
                  width: 200,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blue),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Container(
                      child: Text("test")
                  ),
                )),
                Expanded(child: Container(
                  width: 200,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.red),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Container(
                      child: Text("test")
                  ),
                )),
                Expanded(child: Container(
                  width: 200,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.purple),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Container(
                      child: Text("test")
                  ),
                ))
              ]
            ),
        )
      )
    );
  }
}