Flutter按钮实现问题：如何制作指定样式按钮及实现按钮叠放互斥半透明效果

Hey there! Let's build that overlay button setup with the toggle opacity effect you're asking about. Here's a step-by-step breakdown with working code:

1. Core Concept #

We'll use three key Flutter tools here to make this work:

• Stack: The go-to widget for layering UI elements on top of each other
• Opacity: To dynamically adjust the transparency of the inactive button
• StatefulWidget: To track which button is active and update the UI in real time when taps happen

2. Full Working Code #

import 'package:flutter/material.dart';

void main() => runApp(const OverlayButtonDemo());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Overlay Buttons Demo")),
        body: const Center(child: ButtonOverlay()),
      ),
    );
  }
}

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

  @override
  State<ButtonOverlay> createState() => _ButtonOverlayState();
}

class _ButtonOverlayState extends State<ButtonOverlay> {
  // Track which button is active: 0 for first button, 1 for second
  int _activeButtonIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        // First button (base layer)
        Opacity(
          opacity: _activeButtonIndex == 0 ? 1.0 : 0.5,
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 16),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            ),
            onPressed: () {
              setState(() {
                _activeButtonIndex = 0;
              });
            },
            child: const Text("Button 1", style: TextStyle(fontSize: 18, color: Colors.white)),
          ),
        ),
        // Second button (overlaid layer)
        Positioned(
          // Adjust left/right to control how much buttons overlap
          left: 25,
          child: Opacity(
            opacity: _activeButtonIndex == 1 ? 1.0 : 0.5,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
                padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 16),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
              ),
              onPressed: () {
                setState(() {
                  _activeButtonIndex = 1;
                });
              },
              child: const Text("Button 2", style: TextStyle(fontSize: 18, color: Colors.white)),
            ),
          ),
        ),
      ],
    );
  }
}

3. Easy Customizations #

• Tweak Overlap: Adjust the left/right values in the Positioned widget to make the buttons overlap more or less
• Button Styling: Modify ElevatedButton.styleFrom to change colors, padding, border radius, or even swap in TextButton/OutlinedButton for different button types
• Smoother Transitions: Replace the Opacity widget with AnimatedOpacity and add a duration (like Duration(milliseconds: 300)) to get a nice fade effect when switching states
• Opacity Level: Change the 0.5 value to make the inactive button more transparent (lower value) or less transparent (higher value, up to 1.0)

4. How It Works #

• Tapping Button 1 triggers setState to set _activeButtonIndex to 0, making Button 1 fully opaque and Button 2 semi-transparent
• Tapping Button 2 switches _activeButtonIndex to 1, reversing the opacity states instantly
• The Stack keeps the buttons layered, while Positioned lets you fine-tune their exact placement relative to each other

内容的提问来源于stack exchange，提问作者Juan Carlos Mavesoy Orozco