You can use SliderTheme to customize the slider appearance and wrap Slider with Container to give custom width for the slider. It will take Container width as Slider width.
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.blue,
inactiveTrackColor: Colors.blue,
trackShape: RectangularSliderTrackShape(),
trackHeight: 4.0,
thumbColor: Colors.blueAccent,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
overlayColor: Colors.red.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
),
child: Container(
width: 400,
child: Slider(
min: 0,
max: 1000,
divisions: 5,
value: _currentFontSize,
onChanged: (value) {
setState(() {
_currentFontSize = value;
});
},
),
),
),
The simplest way is to use a `FlatButton` wrapped inside a `Container`, The button by default takes the size of its parent and so assign a desired width to the `Container`.
Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: 60,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {},
color: Colors.red[300],
child: Text(
"Button",
style: TextStyle(
color: Colors.black,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
),
)
Output:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/zYb2X.png