RenderFlex children have non-zero flex but incoming width constraints are unbounded

Question

I am writing code for my news project in flutter.I have copied this code from one tutorial. But I got exceptions and errors in my code. Anybody please help me to solve the issues. My code is:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(97),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 32),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border(
                          bottom: BorderSide(
                        width: 0.5,
                        color: Colors.white,
                      ))),
                  child: AppBar(
                    title: Text(
                      'News',
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 30,
                      ),
                    ),
                  ),
                  // height: 100,
                )
              ]),
        ),
        body: ListView.builder(
          itemBuilder: (context, index) {
            return _listItem(index);
          },
          itemCount: _newsInApp.length,
        ));
  }

  

My console output is:

Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
Xcode build done.                                           22.9s
Syncing files to device iPhone 11 Pro Max...
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: RenderFlex children have non-zero flex but incoming width constraints are unbounded.

Solution

Replace your listItem widget method with :

_listItem(index) {
  return Padding(
    padding: const EdgeInsets.only(left: 15, top: 1, right: 1, bottom: 1),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(bottom: 15),
            child: Text(
              _newsInApp[index].title,
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
          ),
        ),
        IconButton(
          iconSize: 16,
          color: Colors.black26,
          icon: Icon(Icons.arrow_forward_ios),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {},
            ),
          ),
        ),
      ],
    ),
  );
}

Comments

[void]

Can you post the code snippet where you are using that method? @Swift Guy

[Swift Guy]

@ Timilehin Jegede okie done

[void]

You should remove the Expanded widget in the _listItem method, Expanded widgets don't work inside Scrollable widgets. @Swift Guy

[Swift Guy]

@Timilehin Jegede If I remove Expanded widget then it shows error as "Undefined named 'child'".

[void]

Can you add the code snippet of where you took out the Expanded widget?

[Swift Guy]

child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ //"Here" // Expanded( child: Padding( padding: const EdgeInsets.only(bottom: 15), child: Text(_newsInApp[index].title, style: TextStyle( fontSize: 16)

[void]

Too hard to read, add it as a formatted code snippet to your question @Swift Guy.

[void]

Let us continue this discussion in chat.