Flutter - overflowed by Infinity pixels on the bottom

Question

I have problem with overflowed by Infinity pixels on the bottom. I'm find many solution but again not working.

This is my details page.

class MyWidgetApiDetails extends StatelessWidget {
  final Emp emp;
  const MyWidgetApiDetails({Key key, @required this.emp}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DETAILS EMP'),
      ),
      body: Column(
        children: [
          Hero(
              tag: emp.empno,
              child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.network(emp.image))
          ),
          Container(
            height: 20,
            width: 100,
            child: PhotoView(
              imageProvider: AssetImage("assets/images/map.jpg"),
            ),
          ),
          PhotoView(
            imageProvider: NetworkImage(emp.image),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            emp.empno.toString(),
            style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            emp.ename,
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
          )
        ],
      ),
    );
  }
}

When put Column in SingleChildScrollView get RenderFlex object was given an infinite size during layout.

Answer 1

That is because the SingleChildScrollView wants to be as large as possible, you need to put it into something that has constraints, like a Column , you could do something like this:

//pseudocode, not sure about the exact syntax.
body: Expanded(
  child: SingleChildScrollView(
      child: Column(...)
    )
  ]
)

And I believe it should work. Take a look here and here for more information.

Answer 2

You can do by just changing from Column to ListView.

class MyWidgetApiDetails extends StatelessWidget {
  final Emp emp;
  const MyWidgetApiDetails({Key key, @required this.emp}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DETAILS EMP'),
      ),
      body: ListView(
        children: [
          Hero(
              tag: emp.empno,
              child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.network(emp.image))
          ),
          Container(
            height: 20,
            width: 100,
            child: PhotoView(
              imageProvider: AssetImage("assets/images/map.jpg"),
            ),
          ),
          PhotoView(
            imageProvider: NetworkImage(emp.image),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            emp.empno.toString(),
            style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            emp.ename,
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
          )
        ],
      ),
    );
  }
}

Answer 3

将 Column 放入 SingleChildScrollView 并将 PhotoView 包装在 Container 中解决了我的问题。