Issue
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?
Solution
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.
Answered By – Deepak Lohmod
Answer Checked By – Robin (FlutterFixes Admin)