当我按下凸起的按钮时，如何在按钮内的文本下附加滑块？

Question

在我的应用程序启动后，它会立即显示一个按钮。按下此按钮后，我想在同一按钮内构建一个滑块来控制此声音的音量。

我只需要让这个滑块出现，而不是控制音量的机制。

我想要实现的是here..

我的按钮代码

void main() => runApp(Home());
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: "RelaX",
  home: Container(
    child: Scaffold(
      appBar: AppBar(
        elevation: 20.0,
        backgroundColor: Color(0xFF001E3D),
        title: Text(
          'Relax',
          style: GoogleFonts.raleway(
            fontSize: 30.0,
            color: Color(0xFF55b9f3),
          ),
        ),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
              child: Text("View Slider"),
              onPressed: () => print("view slider")),
        ],
      ),
    ),
  ),
);
}
}

Answer 1

您可以使用“可见性”小部件来设置滑块的可见性。请看下面的代码。我将 Container 与 Inkwell 一起使用，以达到与 RaisedButton 相同的效果。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _currentSliderValue = 0;
  bool _sliderVisible = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Raised Button"),
      ),
      body: Center(
        child: ClipRRect(
          borderRadius: const BorderRadius.all(
            Radius.circular(20),
          ),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blue[200],
              borderRadius: const BorderRadius.all(
                Radius.circular(20),
              ),
            ),
            child: Material(
              elevation: 2,
              child: InkWell(
                onTap: () {
                  setState(() {
                    _sliderVisible = !_sliderVisible;
                  });
                },
                child: Container(
                  width: 125.0,
                  height: 125.0,
                  child: Column(
                    children: [
                      const SizedBox(
                        height: 15,
                      ),
                      Icon(
                        Icons.nightlight_round,
                        color: Colors.indigo[900],
                        size: 48,
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      Visibility(
                        visible: _sliderVisible,
                        child: Slider(
                          value: _currentSliderValue,
                          min: 0,
                          max: 10,
                          onChanged: (double value) {
                            setState(() {
                              _currentSliderValue = value;
                            });
                          },
                          activeColor: Colors.indigo[900],
                          inactiveColor: Colors.indigo[900],
                        ),
                      )
                    ],
                  ),
                ),
              ),
              color: Colors.transparent,
            ),
          ),
        ),
      ),
    );
  }
}

当我按下凸起的按钮时，如何在按钮内的文本下附加滑块？

How to append Slider under the text within button when i press the raised Button?

build

widget

flutter

statefulwidget

flutter-animation