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

there is a top and bottom gap – Flutter

hi i have remove the expanded , now the bold text of child has curly wave , what i did wrong over here.

below is my code i, please advice, thanks

   import 'package:flutter/material.dart';

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

  @override
  State<Introduction> createState() => _IntroductionState();
}

class _IntroductionState extends State<Introduction> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: [
      Container(
        color: Color.fromARGB(255, 255, 255, 255),
        child: Column(mainAxisAlignment: MainAxisAlignment.start),
        **child**: const Center(
            child: Image(
                height: 1000,
                width: 1000,
                image: AssetImage("lib/images/instruction.png"))),
      )
    ]));
  }
}
Tags:

3

Answers


  1. 0

    removing your Expanded Widget will do.

    Login or Signup to reply.
  2. 0

    Use mainAxisAlignment: MainAxisAlignment.start, in Column class

    Login or Signup to reply.
  3. 0

    It’s strongly advised to format your code with in-built Dart formatter. By doing that you can clearly see the structure and hierarchy of your code and widgets.

    In your example you inside of Scaffold you have Column as a body widget

    Scaffold(body: Column(children: [

    And Column accepts a list of widgets, this is what square bracket is for. Then you are adding Container as the first child of the list, but inside that Container you add another Column as a child, and trying to pass another **child**: const Center. But it’s done inside of Container, which accepts only 1 child argument, a single Widget (which can be Column again though, which accept a list of Widgets)

    Your current hierarchy looks like this and incorrect:

    Scaffold
 - Column
 -- Container
 --- Column
 --- Center 
 (It breaks before Image, because Container can only hold 1 Widget)
 ---- Image

    Based on your requirements you should have one of the following hierarchies:

    Scaffold
 - Column
 -- Container
 --- Center 
 ---- Image

    class _IntroductionState extends State<Introduction> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            color: Color.fromARGB(255, 255, 255, 255),
            child: Center(
              child: Image(
                height: 1000,
                width: 1000,
                image: AssetImage("lib/images/instruction.png"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

    or

    Scaffold
 - Container
 -- Center 
 --- Image

    class _IntroductionState extends State<Introduction> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color.fromARGB(255, 255, 255, 255),
        child: Center(
          child: Image(
            height: 1000,
            width: 1000,
            image: AssetImage("lib/images/instruction.png"),
          ),
        ),
      ),
    );
  }
}

    or

    Scaffold
 - Container
 -- Column
 --- Center 
 ---- Image

    class _IntroductionState extends State<Introduction> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color.fromARGB(255, 255, 255, 255),
        child: Column(
          children: [
            Center(
              child: Image(
                height: 1000,
                width: 1000,
                image: AssetImage("lib/images/instruction.png"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search