RenderBox was not laid out in flutter

Question

I making a custom appBar, where it has a search bar, and a text search beside the search bar

 appBar: AppBar(
          backgroundColor: Colors.white,
          actions: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey, width: 1),
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                    ),
                    child: TextField(
                      autofocus: false,
                      onChanged: (value) {
                      ....
                      },
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                          hintText: "Search",
                          prefixIcon: Icon(Icons.search),
                          border: InputBorder.none),
                    ),
                  ),
                ),
                Text("search")
              ],
            )
          ],
          elevation: 0,
        ),

Error

════════ Exception caught by rendering library ═════════════════════════════════
RenderFlex children have non-zero flex but incoming width constraints are unbounded.
The relevant error-causing widget was
    Row 
lib/ui/search_unit_owner.dart:49
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#fe581 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'

Answer 1

You have to add Container and give width to screen size.

 AppBar(
        backgroundColor: Colors.white,
        actions: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey, width: 1),
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                    ),
                    child: TextField(
                      autofocus: false,
                      onChanged: (value) {},
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                          hintText: "Search",
                          prefixIcon: Icon(Icons.search),
                          border: InputBorder.none),
                    ),
                  ),
                ),
                Text("search")
              ],
            ),
          )
        ],
        elevation: 0,
      ),

Answer 2

• Actions in Appbar is use to add sth like IconButon...

• To custom AppBar with search box, you can create Widget implements PreferredSizeWidget Example:

  https://gist.github.com/dangngocduc/27f10cb0860ede6c8da6d280b4f917b9