Align Icon Vertically Centered in a Row: Flutter

Question

I am developing a bottom navigation bar which hides upon scrolling up, but I'm unable to achieve the desired result. I have 2 containers with different widgets to handle the separately. In first containers, there are 2 text widgets with a slider and second container has 5 icon buttons. I wat to reduce the space between Texts and slider and align the play_button in vertical centerzz. What I'm trying to make is this:

What have I developed:

this is my code:

bottomNavigationBar: ValueListenableBuilder(
      valueListenable: hiding.visible,
      builder: (context, bool value, child) => AnimatedContainer(
        color: light_mode? Color(0xFFFFFFFF) : Color(0xFF616161),
        duration: Duration(milliseconds: 500),
        height: value ? 100 : 0.0,
        child: Wrap(
          runAlignment: WrapAlignment.center,
          children: <Widget>[
        Container(

             margin: EdgeInsets.fromLTRB(5, 1, 5, 1),
             padding: EdgeInsets.all(5),
             height: 30,
             width: MediaQuery.of(context).size.width,
             child: Row(
                 children: <Widget>[
                 Text("0:00", style: TextStyle(color: Colors.black), textAlign: TextAlign.left),

          Container(
            margin:  EdgeInsets.all(2),
            height: 30,
            width: MediaQuery.of(context).size.width-80,
            child:SliderTheme(
                       data: SliderThemeData(
                         thumbColor: light_mode? Color(0xFF6A0080) : Colors.black,
                         activeTrackColor: light_mode?Color(0xFF6A0080) : Colors.black,
                         inactiveTrackColor: Colors.grey,
                         trackHeight: 1.0,
                       ),
                       child: Slider(
                         value: 60.0,
                         max: 100.0,
                         min: 0.0,
                         onChanged: (double newValue) {
                           setState(() {
                             // sliderValue = newValue.round();
                           });
                         },
                       ))),
                 Text("0:00", style: TextStyle(color: Colors.black),  textAlign: TextAlign.right)
               ],
             ),
        ),
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.fromLTRB(20, 1, 20, 16),
              padding: EdgeInsets.all(8.0),
              height: 50,
              width: MediaQuery.of(context).size.width,
              child:  Wrap(
                      alignment: WrapAlignment.center,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: <Widget>[
                  IconButton(
                    alignment: Alignment.center,
                    icon: Icon(
                      Icons.skip_previous,
                      color: Colors.grey,
                        size: 30,
                    ),
                    onPressed: () {
                      // do something
                    },
                  ),
                  IconButton(
                    padding: EdgeInsets.all(8.0),
                    icon: Icon(
                      Icons.play_circle_fill_rounded,
                      color: light_mode? Color(0xFFEA80FC) : Color(0xFF6D6D6D) ,
                      size: 45,

                    ),
                    onPressed: () {
                      // do something
                    },
                  )
                  ,
                  IconButton(
                    icon: Icon(
                      Icons.skip_next,
                      color: Colors.grey,
                      size: 30,
                    ),
                    onPressed: () {
                      // do something
                    },
                  )
                  ,
                  IconButton(
                    icon: Icon(
                      Icons.bookmark_border_outlined,
                      color: Colors.grey,
                      size: 35.0,
                    ),
                    onPressed: () {
                      // do something
                    },
                  )
                  ,
                  IconButton(
                    icon: Icon(
                      Icons.share_rounded,
                      color: Colors.grey,
                    ),
                    onPressed: () {
                      // do something
                    },
                  )
                ],
              ),
            )
          ],
        ),
      )),

How can i properly align icons in lesser space?

score 1 · Accepted Answer · answered Jun 21 '21 at 04:10

to reduce the space between text and slider you need to give a custom shape to it. So for that create a shape as show below:-

class CustomTrackShape extends RoundedRectSliderTrackShape {
  Rect getPreferredRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
    @required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

and then in your slider theme:-

SliderTheme(
                       data: SliderThemeData(
                         thumbColor: light_mode? Color(0xFF6A0080) : Colors.black,
                         activeTrackColor: light_mode?Color(0xFF6A0080) : Colors.black,
                         inactiveTrackColor: Colors.grey,
                         trackHeight: 1.0,
                         trackShape: CustomTrackShape(),//call your custom shape over here
                       ),
                       child: Slider(
                         value: 60.0,
                         max: 100.0,
                         min: 0.0,
                         onChanged: (double newValue) {
                           setState(() {
                             // sliderValue = newValue.round();
                           });
                         },
                       )),

and for proper alignment of container remove the padding from top and bottom of your container containing thos icons i.e. change padding from padding:EdgeInsets.all(8.0) to padding:EdgeInsets.symmetric(horizontal:8.0), becuase the size of the container is 50 and of icon is 45 and you are providing padding of 10 pixels(5 from top and 5 from bottom) this means container height should be 55. So either increase the height upto 60 or change padding code.

Align Icon Vertically Centered in a Row: Flutter

1 Answers1