Question 265674 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – When specifying a ColumnWidget as the child property of an AlignWidget, the Alignment's [Y] doesn't work

When specifying a ColumnWidget as the child property of an AlignWidget, the Alignment’s [Y] doesn’t work.
When specifying the mainAxisAlignment of a ColumnWidget, you can set the Alignment for [Y] as center, top, or bottom, but you cannot specify it using numbers (e.g., Alignment(0.0, 0.3)), which limits the ability to make fine-grained adjustments.

Dart Pad

Sample Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
          alignment: const Alignment(0.0, 0.0), // [Y] Not Working
          child: Column(
            children: [
              Container(
                height: 50,
                width: 50,
                color: Colors.amber,
              ),
            ],
          )),
    );
  }
}

How can I specify fine-grained Alignment like Alignment(0.0, 0.3) within a ColumnWidget? Or is this a limitation of Flutter?

Tags:

2

Answers


  1. 0

    The default mainAxisSize:MainAxisSize.max on Column. means It will take as much height(constraints) as possible. You can set mainAxisSize:MainAxisSize.min.

    Size goes Up

        return Scaffold(
      body: Align(
          alignment: const Alignment(0.0, 0.0), 
          child: Column(
            mainAxisSize:MainAxisSize.min, //this one
            children: [
              Container(
                height: 50,
                width: 50,
                color: Colors.amber,
              ),
            ],
          )),
    );

    More about ui/layout/constraints.

    Login or Signup to reply.
  2. 0

    Try this code:

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: double.infinity,
        width: double.infinity,
        child: Align(
          alignment: const Alignment(0.0, -0.5),
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              Container(
                height: 50,
                width: 50,
                color: Colors.amber,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search