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

Empty space in container in flutter

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.deepPurple,
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.deepPurple, Colors.purple],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight),
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Image.asset(
                  'assets/images/quiz-logo.png',
                  height: 400,
                  fit: BoxFit.fill,
                ),
                const Text(
                  "Learn Flutter the fun way!",
                  style: TextStyle(fontSize: 30, color: Colors.white),
                ),
              ]),
        ),
      ),
    ),
  );
}

enter image description here

I was trying to add an image to the screen in flutter. However when i change the height of image below 500, i get an empty space on the right side with a different color.

Tags:

2

Answers


  1. 0

    When you change your image to the height of 400, it’s been resized to maintain proportion, so its width is also being reduced.

    Make your main container full width, and it’s contents centered.

    Container(
    alignment: Alignment.center,
    width: double.infinity,
    child: ...
)

    May also help putting your Column cross axis centered.

    Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: ...
)
    Login or Signup to reply.
  2. 0

    Flutter layout golden rules

    Constraints go down. Sizes go up. Parent sets position.

    There are couple of ways to get full width as Dainel Possamai included width: double.infinity on container will solve the issue.

    Also you can do

    Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,

    Or

    body: Container(
  constraints: BoxConstraints.expand(),

    Find more about layout/constraints.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search