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.

CodePudding user response：

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: Column(
  children: [
    SingleChildScrollView(
      child: Column(...)
    )
  ]
)

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

CodePudding user response：

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),
          )
        ],
      ),
    );
  }
}

CodePudding user response：

Put Column in SingleChildScrollView and wrap PhotoView in Container solve my problem.