Flutter点状按钮插件dotted_button的使用

Flutter点状按钮插件dotted_button的使用

获取开始

添加依赖

你可以使用以下命令将 dotted_button 添加为依赖项（使用最新稳定版本）：

$ dart pub add dotted_button

或者，你可以在 pubspec.yaml 文件中的 dependencies 部分手动添加 dotted_button：

dependencies:
  dotted_button: ^replace-with-latest-version

使用简单

DottedButton 是一个简单的 Flutter 包，用于创建具有不同形状的点状边框按钮。以下是一个基本示例：

DottedButton(
  onTap: () {
    setState(() {
      msg = 'Circle Border';
    });
  },
  height: 230,
  width: 100,
  margin: const EdgeInsets.all(20),
  borderType: BorderType.Oval,
  color: Colors.red,
  boxShadow: const [
    BoxShadow(
      color: Colors.black,
      blurRadius: 10,
    ),
  ],
  child: const Text("Circle Border"),
),

完整示例

下面是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 dotted_button 插件。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String msg = 'none';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Dotted Button'),
        ),
        body: SafeArea(
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Wrap(
                alignment: WrapAlignment.center,
                runSpacing: 20,
                spacing: 8,
                children: [
                  displayMessage,
                  const SizedBox(height: 40),
                  rectBorderWidget,
                  circleBorderWidget,
                  rRectBorderWidget,
                  ovalBorderWidget,
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget get displayMessage {
    return DottedButton(child: Text("The clicked button is $msg"));
  }

  Widget get rectBorderWidget {
    return DottedButton(
      onTap: () {
        setState(() {
          msg = 'Rectangle Border';
        });
      },
      child: const Text("Rectangle Border"),
    );
  }

  Widget get circleBorderWidget {
    return DottedButton(
      onTap: () {
        setState(() {
          msg = 'Circle Border';
        });
      },
      height: 230,
      width: 100,
      strokeWidth: 5,
      margin: const EdgeInsets.all(10),
      borderType: BorderType.Oval,
      color: Colors.red,
      boxShadow: const [
        BoxShadow(
          color: Colors.black,
          blurRadius: 10,
        ),
      ],
      child: const Text("Circle Border"),
    );
  }

  Widget get rRectBorderWidget {
    return DottedButton(
      onTap: () {
        setState(() {
          msg = 'RRect Border';
        });
      },
      borderType: BorderType.RRect,
      boxShadow: const [
        BoxShadow(
          color: Colors.black,
          blurRadius: 10,
        ),
      ],
      borderRadius: 30,
      child: const Text("RRect Border"),
    );
  }

  Widget get ovalBorderWidget {
    return DottedButton(
      onTap: () {
        setState(() {
          msg = 'Oval Border';
        });
      },
      height: 130,
      width: 50,
      borderType: BorderType.Oval,
      child: const Text("Oval Border"),
    );
  }
}