Flutter container bottom-center aligned in a stack not fully aligned at the bottom?

user_7243632 0
Viewed 281

Please see the code example and screenshot below. I've got a 300x300 window (the yellow container) where I want to have a status bar at the bottom, but the status bar sometimes has a single pixel at the bottom showing the yellow background (circled in red below).

This doesn't always happen, it's dependent on the size of the window size of the browser. You have to resize the browser window to see it happen (and not happen). It seems like its happening about 50% of the time. My guess is its a rounding error in the Flutter SDK.

Anyone else experience this or know of a work around?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Container(
            decoration: BoxDecoration(
              color: Colors.black,
            ),
            child: Center(
              child: Container(
                  height: 300,
                  width: 300,
                  child: Stack(children: [
                    Container(color: Colors.yellow),
                    Align(
                        alignment: Alignment.bottomCenter,
                        child: SizedBox(
                            height: 50,
                            child: Container(
                              color: Colors.grey.shade900,
                            )))
                  ])),
            )));
  }
}

enter image description here

dart flutter
1 Answers

That is really strange! This should yield your desired behavior, though I'd recommend opening an issue in the Flutter repo as this is definitely just a workaround.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: BoxDecoration(
          color: Colors.black,
        ),
        child: Center(
          child: Container(
            height: 300,
            width: 300,
            child: Stack(
              children: [
                Container(color: Colors.yellow),
                Positioned(
                  bottom: -1,
                  child: Container(
                    height: 51,
                    width: 300,
                    color: Colors.grey.shade900,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I found that this still leaves yellow on the sides when resizing the window, the following just uses a column instead of a stack. Not sure if it'll work for your use case but it avoids the issue entirely:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: BoxDecoration(
          color: Colors.black,
        ),
        child: Center(
          child: Container(
            height: 300,
            width: 300,
            child: Column(
              children: [
                Container(
                  color: Colors.yellow,
                  height: 250,
                  width: 300,
                ),
                Container(
                  height: 50,
                  width: 300,
                  color: Colors.grey.shade900,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
user_72598580
Related