[Flutter]点線(dotted line)の枠線(border)をつけるには？

どうも、ちょげ(@chogetarou)です。

ウェジェットに点線の枠線をつける方法を紹介します。

方法
使用例

方法

ウェジェットに点線の枠線をつけるには、「dotted_border」パッケージを使います。

まず、「pubspec.yaml」でパッケージを追加します。

dependencies:
  dotted_border: ^2.0.0+2

次に、該当ファイルでパッケージをインポートします。

import 'package:dotted_border/dotted_border.dart';

そして、点線の枠線をつけるウェジェットを、DottedBoderウェジェットでラップします。

DottedBorder(
  child: ExampleWidget(),
)

FocusManagerを使うことで、キーボードを閉じることが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DottedBorder(
          color: Colors.red, //枠線の色
          strokeWidth: 2, //枠線の太さ
          dashPattern: [3, 4], //点線の設定
          padding: EdgeInsets.all(10), //パディング
          child: Container(
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }