Flutter无需Material/Cupertino能否使用Button？求实现示例

可以实现。官方的Button系列组件（如ElevatedButton、TextButton）属于Material库，直接在WidgetsApp中使用会因缺少Material上下文报错，但你完全可以基于Flutter核心组件自定义不依赖Material/Cupertino的按钮。

实现示例 #

以下是一个纯基础组件构建的自定义按钮，仅依赖WidgetsApp、GestureDetector等核心widget，不涉及Material/Cupertino库：

import 'package:flutter/widgets.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      title: 'Custom Button Demo',
      color: const Color(0xFF2196F3),
      builder: (context, child) {
        return const Center(
          child: CustomButton(
            text: '点击测试',
            onPressed: _handleButtonTap,
          ),
        );
      },
    );
  }

  static void _handleButtonTap() {
    print('自定义按钮触发点击事件');
  }
}

class CustomButton extends StatefulWidget {
  final String text;
  final VoidCallback? onPressed;

  const CustomButton({
    super.key,
    required this.text,
    required this.onPressed,
  });

  @override
  State<CustomButton> createState() => _CustomButtonState();
}

class _CustomButtonState extends State<CustomButton> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 处理按钮交互状态
      onTapDown: (_) => setState(() => _isPressed = true),
      onTapUp: (_) => setState(() => _isPressed = false),
      onTapCancel: () => setState(() => _isPressed = false),
      onTap: widget.onPressed,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        decoration: BoxDecoration(
          color: _isPressed ? const Color(0xFF424242) : const Color(0xFF616161),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(
          widget.text,
          style: const TextStyle(
            color: Color(0xFFFFFFFF),
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}

核心思路 #

• 用GestureDetector处理所有触摸事件，模拟按钮按下/抬起的交互反馈
• 通过Container自定义按钮的视觉样式，包括背景色、圆角、内边距等，完全自主控制
• 借助StatefulWidget管理按钮的按压状态，提供即时视觉反馈
• 整个实现仅依赖Flutter的核心widget库，无需引入Material或Cupertino相关依赖

官方的按钮变更文档仅针对Material库内的按钮API调整，不限制开发者基于基础组件自定义无依赖的按钮组件。

内容的提问来源于stack exchange，提问作者d3im