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

Question

Immediately after my app start it will show a button. As soon as this button is pressed I want to build a slider within the same button to control the volume for this sound.

All I need is to make this slider appear and not the mechanics to control the volume.

what i want to acheive is here..

my button code

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

You may use the Visibility widget to set the visibility of the slider. Please see the code below. I'm using Container along with Inkwell to achieve the same effect as 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,
            ),
          ),
        ),
      ),
    );
  }
}