Slider does not align parallel to other child in Colum

Question

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]),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

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(
    // ...
  ),
)