How can I fix this problem?

The problem is that a RenderFlex overflowed by 49 pixels on the bottom. It occurs when I click IconButton named 'navigator_before' in code.

Why the error occurs? How can I fix it?

// This is Second Page

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

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        top: true,
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 0.0),
          child: Column(
            children: [
              Hero(
                tag: 'Searching',
                child: Material(
                  type: MaterialType.transparency,
                  child: CupertinoSearchTextField(
                    autofocus: true,
                    prefixIcon: IconButton( // <---------------------------- button
                      icon: Icon(Icons.navigate_before,
                      size: 30.0,),
                      onPressed: (){
                        Navigator.pop(context);
                      },
                    ),
                    suffixInsets: EdgeInsets.only(right: 20),
                    prefixInsets: EdgeInsets.only(left: 10),
                    padding: EdgeInsets.only(left: 5,top: 15, bottom: 15),
                    decoration: BoxDecoration(
                      border: Border(bottom: BorderSide(width: 0.5, color: Color(0xff868686)))
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// This is first Page

...
child: Column(
    children: [
      const SizedBox(height: 250.0,),
      InkWell(
        splashColor: Colors.transparent, // 누르고있을 때, 물결효과 제거하기,
        highlightColor: Colors.transparent, // 누르고있을 때, 물결효과 제거하기,
        onTap: (){
          Navigator.of(context).push(
            MaterialPageRoute(
                builder: (BuildContext context){
                  return SearchOnScreen();
                }
            ),
          );
        },
        child: IgnorePointer(
          child: Hero(
              tag: 'Searching',
              child: MainSearchTextFormField()),
        ),
      ),
    ]
)

I tried to wrap the prefixicon in Column. But the error also occured. So I removed the Column.

CodePudding user response：

Try wrapping the Column in a SingleChildScrollView widget. This may fix your problem. It will allow the page to scroll while the page navigation animation is occurring.

Then, if you don’t want the user to manually be able to scroll this column, set the physics property of the SingleChildScrollView to const NeverScrollableScrollPhysics().