Flutter -如何在单击时切换FlatButton的颜色？

Flutter是一种跨平台的移动应用开发框架，可以用于快速构建高性能、美观的移动应用程序。在Flutter中，可以通过以下步骤来实现在单击时切换FlatButton的颜色：

导入所需的Flutter包：

import 'package:flutter/material.dart';

创建一个有状态的Flutter小部件（StatefulWidget）：

class MyFlatButton extends StatefulWidget {
  @override
  _MyFlatButtonState createState() => _MyFlatButtonState();
}

创建一个与上述小部件关联的状态类：

class _MyFlatButtonState extends State<MyFlatButton> {
  Color _buttonColor = Colors.blue; // 初始颜色为蓝色

  void _changeColor() {
    setState(() {
      // 在点击时切换颜色
      _buttonColor = _buttonColor == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _changeColor,
      color: _buttonColor,
      child: Text('FlatButton'),
    );
  }
}

在主应用程序中使用该自定义小部件：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter FlatButton'),
      ),
      body: Center(
        child: MyFlatButton(),
      ),
    ),
  ));
}

在上述代码中，我们创建了一个有状态的Flutter小部件MyFlatButton，其中包含一个FlatButton。在点击时，通过调用_changeColor方法来切换按钮的颜色。使用setState方法可以通知Flutter框架重新构建小部件，以便更新UI。

这是一个简单的示例，展示了如何在单击时切换FlatButton的颜色。根据实际需求，可以根据Flutter的丰富功能和组件库进行更复杂的UI设计和交互操作。

腾讯云相关产品和产品介绍链接地址：