Flutter, how to treat a container as a panel or something similar?

Question

Is there a possibility to change panels as well as java? check this video https://youtu.be/cpGw6rnQNxg , I want to be able to do that kind of transition in flutter, I mean I want to treat this main container as a panel, and then when the user tap in any of the button that I have in that screen I want to be able to change the panel, but just that panel and not all the screen.

This is the actual code and you can compile it without problem, no dependencies nedded

import 'package:flutter/material.dart';

class Prueba2 extends StatefulWidget {
  Prueba2({Key key}) : super(key: key);

  @override
  _PruebaState createState() => _PruebaState();
}

class _PruebaState extends State<Prueba2> {
  List<bool> isSelected;
  @override
  void initState() {
    super.initState();
    isSelected = [true, false];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
            padding: EdgeInsets.only(top: 40, left: 10),
            child: isSelected[0]
                ? Container(
                    color: Colors.white,
                    width: (MediaQuery.of(context).size.width) - 20,
                    height: 240,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        ToggleButtons(
                          borderColor: Colors.black,
                          fillColor: Colors.grey,
                          borderWidth: 2,
                          selectedBorderColor: Colors.black,
                          selectedColor: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                          children: <Widget>[
                            Container(
                              width: 225,
                              child:
                                  Container(child: Center(child: Text('Ida'))),
                            ),
                            Container(
                              width: 225,
                              child: Container(
                                  child: Center(child: Text('Ida y Vuelta'))),
                            ),
                          ],
                          isSelected: isSelected,
                          onPressed: (index) {
                            setState(() {
                              for (var i = 0; i < isSelected.length; i++) {
                                if (i == index) {
                                  isSelected[i] = true;
                                } else {
                                  isSelected[i] = false;
                                }
                              }
                            });
                          },
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              width: 220,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Origen'),
                                icon: Icon(Icons.airline_seat_recline_extra),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Container(
                              width: 220,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Destino'),
                                icon: Icon(Icons.airline_seat_recline_extra),
                                onPressed: () {},
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              width: 330,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Fecha de partida'),
                                icon: Icon(Icons.calendar_today),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 20,
                            ),
                            Container(
                              width: 100,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('+ 1 -'),
                                icon: Icon(Icons.directions_run),
                                onPressed: () {},
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                          width: 450,
                          child: RaisedButton(
                            color: Colors.black,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20)),
                            child: Text('Buscar',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20)),
                            onPressed: () {},
                          ),
                        )
                      ],
                    ),
                  )
                : Container(
                    color: Colors.white,
                    width: (MediaQuery.of(context).size.width) - 20,
                    height: 240,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        ToggleButtons(
                          borderColor: Colors.black,
                          fillColor: Colors.grey,
                          borderWidth: 2,
                          selectedBorderColor: Colors.black,
                          selectedColor: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                          children: <Widget>[
                            Container(
                              width: 225,
                              child:
                                  Container(child: Center(child: Text('Ida'))),
                            ),
                            Container(
                              width: 225,
                              child: Container(
                                  child: Center(child: Text('Ida y Vuelta'))),
                            ),
                          ],
                          isSelected: isSelected,
                          onPressed: (index) {
                            setState(() {
                              for (var i = 0; i < isSelected.length; i++) {
                                if (i == index) {
                                  isSelected[i] = true;
                                } else {
                                  isSelected[i] = false;
                                }
                              }
                            });
                          },
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              width: 220,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Origen'),
                                icon: Icon(Icons.airline_seat_recline_extra),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Container(
                              width: 220,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Destino'),
                                icon: Icon(Icons.airline_seat_recline_normal),
                                onPressed: () {},
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              width: 330 / 2,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Fecha de ida'),
                                icon: Icon(Icons.calendar_today),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Container(
                              width: 330 / 2,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('Fecha de vuelta'),
                                icon: Icon(Icons.calendar_today),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Container(
                              width: 100,
                              height: 50,
                              child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                                color: Colors.grey[200],
                                label: Text('+ 1 -'),
                                icon: Icon(Icons.directions_run),
                                onPressed: () {},
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                          width: 450,
                          child: RaisedButton(
                            color: Colors.black,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20)),
                            child: Text('Buscar',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20)),
                            onPressed: () {},
                          ),
                        )
                      ],
                    ),
                  )));
  }
}

Answer 1

You can use a PageView. Here's an example of how to implement one, please try it:

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page view example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              alignment: Alignment.center,
              child: Text('Other content'),
            ),
          ),
          Container(
            height: 200,
            child: PageView(
              physics: NeverScrollableScrollPhysics(),
              controller: _pageController,
              children: <Widget>[
                Container(
                  color: Colors.red,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      RaisedButton(
                        child: Text('Next'),
                        onPressed: nextPage,
                      ),
                      RaisedButton(
                        child: Text('Go to page 3'),
                        onPressed: () => goToPage(2),
                      ),
                    ],
                  )
                ),
                Container(
                  color: Colors.blue,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      RaisedButton(
                        child: Text('Previous'),
                        onPressed: prevPage,
                      ),
                      RaisedButton(
                        child: Text('Next'),
                        onPressed: nextPage,
                      ),
                    ],
                  )
                ),
                Container(
                  color: Colors.green,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      RaisedButton(
                        child: Text('Previous'),
                        onPressed: prevPage,
                      ),
                      RaisedButton(
                        child: Text('Go to page 1'),
                        onPressed: () => goToPage(0),
                      ),
                    ],
                  )
                ),
              ],
            )
          ),
        ],
      ),
    );
  }

  void nextPage() {
    _pageController.animateToPage(_pageController.page.toInt() + 1,
        duration: Duration(milliseconds: 700),
        curve: ElasticOutCurve()
    );
  }

  void prevPage() {
    _pageController.animateToPage(_pageController.page.toInt() - 1,
        duration: Duration(milliseconds: 700),
        curve: ElasticOutCurve()
    );
  }

  void goToPage(int pageNumber) {
    _pageController.animateToPage(pageNumber,
        duration: Duration(milliseconds: 700),
        curve: ElasticOutCurve()
    );
  }
}