Question 76156 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make Flutter web container adapt to full height and width of screen?

I would like to make a container to adapt to full size of the screen (with min height and width) no matter how the user resize the window.
enter image description here
But now I have to hard code the dimension of the container, otherwise error returns:
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Please help to tell how to make the layout much like this:
enter image description here

Widget build(BuildContext context) {
    return Container(
       width: 1000,
       height: 600,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent),
      ),
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
                itemCount: dataList.length,
                itemBuilder: (BuildContext context, int index) {
                  return dataCard(context, dataList, index);
                }),
          ),
          SizedBox(height: 20),
          TextButton(
            onPressed: () {},
            child: Text('add'),
          )
        ],
      ),
    );
  }
}

Widget dataCard(context, dl, i) {
  return Row(
    children: [
      Expanded(
        flex: 1,
        child: Text(dl[i].id.toString()),
      ),
      Expanded(
        flex: 4,
        child: Text(dl[i].chinesename),
      ),
      Expanded(
        flex: 4,
        child: Text(dl[i].englishname),
      ),
      Expanded(
        flex: 1,
        child: TextButton(
          onPressed: () {},
          child: Text('Edit'),
        ),
      ),
      Expanded(
        flex: 1,
        child: TextButton(
          onPressed: () {},
          child: Text('Delete'),
        ),
      ),
    ],
  );
}
Tags:

3

Answers


  1. 0

    try using this code

    width: double.infinity,
height: double.infinity,
    Login or Signup to reply.
  2. 0

    Use the code below instead.

    Widget build(BuildContext context) {
    return Container(
    width  : MediaQuery.of(context).size.width,
 height : MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent),
      ),
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
                itemCount: dataList.length,
                itemBuilder: (BuildContext context, int index) {
                  return dataCard(context, dataList, index);
                }),
          ),
          SizedBox(height: 20),
          TextButton(
            onPressed: () {},
            child: Text('add'),
          )
        ],
      ),
    );
  }
}

Widget dataCard(context, dl, i) {
  return Row(
    children: [
      Expanded(
        flex: 1,
        child: Text(dl[i].id.toString()),
      ),
      Expanded(
        flex: 4,
        child: Text(dl[i].chinesename),
      ),
      Expanded(
        flex: 4,
        child: Text(dl[i].englishname),
      ),
      Expanded(
        flex: 1,
        child: TextButton(
          onPressed: () {},
          child: Text('Edit'),
        ),
      ),
      Expanded(
        flex: 1,
        child: TextButton(
          onPressed: () {},
          child: Text('Delete'),
        ),
      ),
    ],
  );
}
    Login or Signup to reply.
  3. 0

    You should not give the container height and width static. Give it like a dynamic;

    mediaQuery.size.height;
mediaQuery.size.width;

    You can multiply these values according to the values you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search