I have created a flutter webapp but I have a screen that shows a grey page not sure why, I think its something to do with the listview since all pages with the listview have the same problem. Can you take a look at the code below to figure out the problem?

  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      endDrawer: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 300),
          child: const SideMenu()),
      body: SingleChildScrollView(
        child: SafeArea(
          child: Container(
            width: size.width,
            constraints: BoxConstraints(minHeight: size.height),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  const NavBar(),

This is where the grey screen start to appears

                  const BrowseScreenBody(),
                  const Footer(),
                ]),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final events = Event.events.toList();

    return Container(
        margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
        child: Expanded(
          child: Padding(
            padding: ...,
            child: Column(
              children: <Widget>[
                  RichText(
                    text: TextSpan(
                      children: [
                        ...
                      ],
                    ),
                  ),

                //Events Lists
                SizedBox(
                  height: size.height * 0.65,width: size.width,
                  child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: events.length,
                      itemBuilder: (context, index) {
                        final event = events[index];
                        return Card(
                          child: Container(
                            decoration: BoxDecoration(
                                color: Colors.white),
                            child: Padding(
                              padding: ...
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Container(
                                        height: size.height * 0.25,
                                        width: size. Width * 0.4,
                                        decoration: BoxDecoration(
                                            image: DecorationImage(
                                                image: NetworkImage(...))),
                                      ),
                                      Row(
                                        children: [
                                          Column(
                                            children: [...
                                            ],
                                          ),
                                        ],
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ),
                        );
                      }),
                ),
              ],
            ),
          ),
        ));
  }
}

Everything works well on debug mode, but when hosted to github pages I can't seem to get the widgets shown.

CodePudding user response：

The problem is that you are using an Expanded as child of a Container. Expanded can only be a child of a Flex widget like Row or Column. But it's very likely that you actually do get errors in debug mode as well in your console. Because when I tried your code (slightly modified to make it runnable) it did give an error. Something like

======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Padding widget.