【 dotted_border 】点線の枠線を実装しよう！【flutter】

点線の枠線を実装したい！

本記事ではそんな要望にお答えします。

Flutterで点線の枠線を実装できるパッケージ、
dotted_border パッケージを紹介します。

本記事を読めば、以下の画像のようなUIを実装可能です。

基本的な使い方から、カスタマイズ方法まで解説します。

ぜひ読んでみてください！

基本的な使い方
1. 準備
2. 実装
カスタマイズ方法
まとめ
編集後記（2022/9/30）

基本的な使い方

準備

まず準備として、パッケージのインストールと、
Dartファイルへのインポート文の追加を行います。

パッケージのインストール

CLI(macならターミナル)で、自分のプロジェクトのルートにて
以下のコマンドを実行しパッケージをインストールします。

flutter pub add dotted_border

パッケージのインポート

実装したいDartファイルの上部に以下のインポート文を追加し、
パッケージをインポートします。

import 'package:dotted_border/dotted_border.dart';

実装

実装方法について解説します。

点線の枠線で囲いたいウィジェットをDottedBorder ウィジェットで囲うことで、
点線の枠線を実装できます。

DottedBorder(
  child: ...
),

サンプルコード全体

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('dotted_border sample'),
      ),
      body: Center(
        child: DottedBorder(
          child: const SizedBox(
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}

基本的な使い方は以上となります。

カスタマイズ方法

dotted_border パッケージでのカスタマイズ方法について解説していきます。

枠線の色

colorプロパティにて枠線の色を設定することが可能です。

         DottedBorder(
          color: Colors.blue,
          child: const SizedBox(
            width: 300,
            height: 300,
          ),
        ),

枠線の外形

borderType プロパティにて、枠線の全体の形を設定可能です。

BorderType.RRect

radius プロパティで設定した半径を持つ曲線を角に設定することができます。

        DottedBorder(
          borderType: BorderType.RRect,
          radius: const Radius.circular(50),
          child: const SizedBox(
            width: 400,
            height: 300,
          ),
        ),

BorderType.Circle

円の枠線を設定可能です。

        DottedBorder(
          borderType: BorderType.Circle,
          child: const SizedBox(
            width: 400,
            height: 300,
          ),
        ),

BorderType.Circle

楕円の枠線を設定可能です。

        DottedBorder(
          borderType: BorderType.Oval,
          child: const SizedBox(
            width: 400,
            height: 300,
          ),
        ),

線の太さ

strokeWidth プロパティにて、枠線の太さを設定可能です。

        DottedBorder(
          strokeWidth: 5,
          child: const SizedBox(
            width: 400,
            height: 300,
          ),
        ),

点線の間隔

dashPatternプロパティにて、点線の間隔を設定可能です。
前の数字で線の長さ、後ろの数字で間隔の長さとなります。

        DottedBorder(
          dashPattern: const [5, 10],
          child: const SizedBox(
            width: 400,
            height: 300,
          ),
        ),