Flutter教育风格按钮插件edu_plus_button的使用

Features

开始使用

如何使用？

此插件包含以下选项：

• <code>double height</code>
• <code>double width</code>
• <code>bool isDark</code>
• <code>bool hasBorder</code>
• <code>bool isTwoIcon</code>

使用

导入插件

import 'package:edu_plus_button/edu_plus_button.dart';

完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用edu_plus_button插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("edu_plus_button 示例"),
        ),
        body: Center(
          child: EduPlusButtonExample(),
        ),
      ),
    );
  }
}

class EduPlusButtonExample extends StatefulWidget {
  [@override](/user/override)
  _EduPlusButtonExampleState createState() => _EduPlusButtonExampleState();
}

class _EduPlusButtonExampleState extends State<EduPlusButtonExample> {
  bool _isDark = false;
  bool _hasBorder = true;
  bool _isTwoIcon = false;

  void _toggleIsDark() {
    setState(() {
      _isDark = !_isDark;
    });
  }

  void _toggleHasBorder() {
    setState(() {
      _hasBorder = !_hasBorder;
    });
  }

  void _toggleIsTwoIcon() {
    setState(() {
      _isTwoIcon = !_isTwoIcon;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 创建一个教育风格按钮
        EduPlusButton(
          height: 50.0,
          width: 200.0,
          isDark: _isDark,
          hasBorder: _hasBorder,
          isTwoIcon: _isTwoIcon,
          onPressed: () {
            print("按钮被点击了！");
          },
          child: Text(
            "点击我",
            style: TextStyle(color: Colors.white),
          ),
        ),

        SizedBox(height: 20),

        // 控制按钮样式的切换开关
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _toggleIsDark,
              child: Text(_isDark ? "切换到亮色模式" : "切换到暗色模式"),
            ),
            SizedBox(width: 20),
            ElevatedButton(
              onPressed: _toggleHasBorder,
              child: Text(_hasBorder ? "隐藏边框" : "显示边框"),
            ),
            SizedBox(width: 20),
            ElevatedButton(
              onPressed: _toggleIsTwoIcon,
              child: Text(_isTwoIcon ? "单图标模式" : "双图标模式"),
            ),
          ],
        ),
      ],
    );
  }
}