CODEWITHSUNDEEP
flutterflutter-layout
Cold_Class
Cold_Class

Reputation: 3494

How can I prevent a slider from messing up my layout?

When I try to add a Slider to the bottom of my app, the whole BottomAppBar moves up to the center and the body content ("Test") is gone, as seen in the screenshots:
Without Slider With Slider
How can I add a slider next to the two icons without destroying the whole layout?
Here's my code: 

runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Center(
          child: Text("Test"),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            children: [
              Slider(
                value: 1,
              ),
              FlatButton(
                child: Icon(Icons.photo_size_select_actual),
                onPressed: () => {},
              ),
              FlatButton(
                child: Icon(Icons.camera_alt),
                onPressed: () => {},
              ),
            ],
          ),
        ),
      ),
    ),
  );

Upvotes: 2

Views: 55

Answers (3)

Doc
Doc

Reputation: 11661

Use IntrinsicHeight. This will allow it to use the exact height needed and not more.

  bottomNavigationBar: BottomAppBar(
    child: IntrinsicHeight(
      child: Row(...),
    ),
  )

which gives us sample

Upvotes: 1

lazos
lazos

Reputation: 1075

From Slider Documentation

By default, a slider will be as wide as possible, centered vertically. When given unbounded constraints, it will attempt to make the track 144 pixels wide (with margins on each side) and will shrink-wrap vertically.

So that's why always the Row and the whole BottomAppBar moves up to the center.

But you can fix this using the kBottomNavigationBarHeight (default to double = 56.0, you can find it in constants.dart file) which is flutters constant to get the height of the bottom navigation bar.Then you can wrap the row with SizedBox or Container 

  bottomNavigationBar: BottomAppBar(
    child: SizedBox(
      height: kBottomNavigationBarHeight,
      child: Row( ...

Upvotes: 1

Amir Ali Aghamali
Amir Ali Aghamali

Reputation: 642

i figured this out, the problem is slider takes the whole screen height and expands the BAB's height, I ran a quick solution by parenting the slider with a container and setting a height to it but I believe there are better ways.just to show you this:

bottomNavigationBar: BottomAppBar(
    child: Row(
      children: [
        Container(
          height: 60.0,
          color: Colors.black,
          child: Slider(
            onChanged: (d) {
              setState(() {
                print(d);
              });
            },
            value: 1,
          ),
        ),
        FlatButton(
          child: Icon(Icons.photo_size_select_actual),
          onPressed: () => {},
        ),
        FlatButton(
          child: Icon(Icons.camera_alt),
          onPressed: () => {},
        ),
      ],
    ),
  ),

and the outcome:

enter image description here

Upvotes: 1

Related Questions