【Flutter】点線の枠線(dotted_border)を実装し、サイズ、太さ、色、角丸に変更する方法を解説

dependencies:
  flutter:
    sdk: flutter
  dotted_border: ^2.1.0

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: DottedBorder(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Text('点線の枠線のサンプル', style: TextStyle(fontSize: 16)),
            ),
            borderType: BorderType.RRect,
            padding: EdgeInsets.all(6),
            dashPattern: [8, 4],
          ),
        ),
      ),
    );
  }
}

DottedBorder(
  child: Container(
    width: 200, // サイズ変更: 幅を200に設定
    height: 100, // サイズ変更: 高さを100に設定
    padding: EdgeInsets.all(8),
    child: Center(
      child: Text('サイズ変更された点線の枠線', style: TextStyle(fontSize: 16)),
    ),
  ),
  // 以下は前述の設定を維持
  borderType: BorderType.RRect,
  padding: EdgeInsets.all(6),
  dashPattern: [8, 4],
)

DottedBorder(
  strokeWidth: 2.0, // 点線の太さを2.0に変更
  // 以下は前述の設定を維持
  child: Container(
    // Container設定は省略
  ),
  borderType: BorderType.RRect,
  padding: EdgeInsets.all(6),
  dashPattern: [8, 4],
)

DottedBorder(
  color: Colors.red, // 点線の色を赤に変更
  // 以下は前述の設定を維持
  strokeWidth: 2.0,
  child: Container(
    // Container設定は省略
  ),
  borderType: BorderType.RRect,
  padding: EdgeInsets.all(6),
  dashPattern: [8, 4],
)

DottedBorder(
  radius: Radius.circular(20.0), // 角の丸みを20.0に変更
  // 以下は前述の設定を維持
  color: Colors.red,
  strokeWidth: 2.0,
  child: Container(
    // Container設定は省略
  ),
  borderType: BorderType.RRect,
  padding: EdgeInsets.all(6),
  dashPattern: [8, 4],
)