I am trying to build the UI below:
The child of Column
widgets does not align parallel with another child.
As I have provided the
crossAxisAlignment CrossAxisAlignment.start,
but It does not work.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 140,
width: 380,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.only(left: 25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('ご利用可能額'),
SizedBox(width: 10),
Icon(Icons.info_outline),
SizedBox(width: 160),
Text('32322円'),
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
trackHeight: 12.0,
thumbShape: SliderComponentShape.noOverlay,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.grey[500],
),
child: Slider(
value: 0.8,
onChanged: (value) {
// Add your slider value change logic here
},
),
),
Row(
children: [
Text(
'32322円',
style: TextStyle(color: Colors.grey[500]),
),
SizedBox(width: 220),
Text(
'32322円',
style: TextStyle(color: Colors.grey[500]),
),
],
),
],
),
),
),
),
);
}
}
The alignment does work. If you open Flutter Inspector in DevTools and enable Show Guidelines, it will show you that the Slider
widget is actually aligned with the other children in the Column
:
(Another way to check this is to wrap the Slider
with a Container
and put a color to that Container
)
The space that you see to the left and right sides of the Slider
is from the Slider
widget itself.
You can make the Slider
aligned with the other widgets by removing the Padding
that wraps the entire Column
and put individual paddings to each child except the Slider
.
Another way is to wrap the Slider
with Transform.scale
:
Transform.scale(
scaleX: 1.15,
child: Slider(
// ...
),
)
Or if you only want to align the left side of the Slider
, you can also use Transform.translate
:
Transform.translate(
offset: Offset(-24, 0),
child: Slider(
// ...
),
)