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

Widgets Layout in flutter

I am working on website where i have multiple widgets to be laid one below the other. I have seperate widgets folder where i save all widgets file. I am import widgets on Home screen which is then called in main file.. but only widget is displayed on ui other widgets are not showing up.

Below is the code of Home screen.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Horizon', style: TextStyle(fontSize: 24)),
      ),
      endDrawer: const MyDrawer(),

      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color.fromRGBO(164, 122, 125, 1), Color.fromRGBO(250, 250, 250, 1)],
                ),
              ),
              padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 40.0),
              child: const LandingWidget(),
            ),
            const SizedBox(height: 20),
            const CustomerLogoWidget(),
            const SizedBox(height: 20),
            const Contact()
            ],
        ),
      ),
    );
}

Below is another widget which i am importing and displaying on ui

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body : ListView(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.black,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.black,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.black,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.black,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.black,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.black,
          ),
        ),
      ],
    )
  );
    
  }
}
Tags:

2

Answers


  1. 0

    Always check your console when something doesn’t show up. You will see that errors will show up. What’s going wrong here is that you have a Scaffold inside a scrollable container. A Scaffold takes as much space as possible which would be infinite in a scrollable container. Even when removing it then the ListView will give the same problem because it wants to be infinite height. This can be fixed by giving it shrinkWrap: true or change it into a Column. So in conclusion, you need to change your CustomerLogoWidget to this:

    class CustomerLogoWidget extends StatelessWidget {
  const CustomerLogoWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.black,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.black,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.black,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.black,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.black,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.black,
            ),
          ),
        ],
    );
  }
}
    Login or Signup to reply.
  2. 0

    Remove Scaffold from CustomerLogoWidget and also use Column instead of ListView in CustomerLogoWidget widget.

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

Back To Top
Search