Flutter图像按钮插件simple_dart_image_button的使用

在Flutter开发中，有时我们需要创建一个带有图片的按钮。为了简化这一过程，可以使用simple_dart_image_button插件。该插件允许开发者轻松创建具有自定义图片的按钮，并且支持按下时的状态变化。

插件安装

首先，在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  simple_dart_image_button: ^1.0.0

然后运行flutter pub get来获取插件。

使用示例

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ImageButton 示例'),
        ),
        body: Center(
          child: ImageButtonExample(),
        ),
      ),
    );
  }
}

class ImageButtonExample extends StatefulWidget {
  @override
  _ImageButtonExampleState createState() => _ImageButtonExampleState();
}

class _ImageButtonExampleState extends State<ImageButtonExample> {
  bool _isPressed = false;

  void _onPress() {
    setState(() {
      _isPressed = !_isPressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SimpleDartImageButton(
      onPressed: _onPress,
      imageSource: _isPressed ? 'assets/images/pressed.png' : 'assets/images/default.png',
      width: 150,
      height: 150,
      borderRadius: 10,
      shadowColor: Colors.black.withOpacity(0.2),
      shadowBlurRadius: 5,
    );
  }
}

代码说明

1. 导入必要的库：

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

2. 主应用配置：

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

3. 创建MaterialApp：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('ImageButton 示例'),
           ),
           body: Center(
             child: ImageButtonExample(),
           ),
         ),
       );
     }
   }

4. 定义ImageButton状态管理：

   class _ImageButtonExampleState extends State<ImageButtonExample> {
     bool _isPressed = false;
   
     void _onPress() {
       setState(() {
         _isPressed = !_isPressed;
       });
     }
   }

5. 使用SimpleDartImageButton：

   SimpleDartImageButton(
     onPressed: _onPress,
     imageSource: _isPressed ? 'assets/images/pressed.png' : 'assets/images/default.png',
     width: 150,
     height: 150,
     borderRadius: 10,
     shadowColor: Colors.black.withOpacity(0.2),
     shadowBlurRadius: 5,
   )