[Flutter]Containerに破線の枠線をつけるには？

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

Containerに破線の枠線をつける方法を紹介します。

方法

Containerに破線の枠線をつけるには、「dotted_border」パッケージを使います。

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

dependencies:
  dotted_border: ^2.0.0+1

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

import 'package:dotted_border/dotted_border.dart';

次に、ContainerをDottedBorderのchildに指定します。

DottedBorder(
  child: Container(),
),

最後に、DottedBorderの引数「dashPattern」に破線の長さを指定します。

破線の長さは、[破線の長さ, 破線の間の長さ]のように指定します。

DottedBorder(
  dashPattern: [
    /*破線の長さ*/,
    /*破線の間の長さ*/,
  ],
  child: Container(),
),

これでContainerに破線の枠線をつけることが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DottedBorder(
          dashPattern: [
            10, //破線の長さ
            2, //破線の間の長さ
          ],
          child: Container(
            width: 300,
            height: 100,
          ),
        ),
      ),
    );
  }