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

solved – Flutter – Maintain the size of container when using different device

This is my widget of category list want to display

  Widget categorylist() {
    return Container(
      height: 35.h,
      width: double.infinity,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: category.length,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          bool isSelected = categoryText == category[index];
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
            decoration: BoxDecoration(
              color: isSelected ? primaryColor : Colors.white,
              borderRadius: BorderRadius.circular(20),
            ),
            child: InkWell(
              onTap: () {
                categoryText = category[index];
                Provider.of<RestaurantProvider>(context, listen: false)
                    .getAll(query: searchText, category: categoryText);
              },
              child: Text(
                category[index],
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                  color: isSelected ? Colors.white : Color(0xFF4C53A5),
                ),
              ),
            ),
          );
        },
      ),
    );
  }

It will display the height of the list will change when I use different device, I want to keep it maintain.
enter image description here

Tags:

2

Answers


  1. 0

    My advice is not to hardcore height, just use padding instead:

    Container(
      padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 8.h),
      width: double.infinity,
      child: ListView.builder(...),)

    This way your container will be adaptive and text will never be cropped.

    Or if it is not the right choice for you you can use Expanded() instead of a Container with hardroced height.

    Login or Signup to reply.
  2. 0

    Either use padding as the other answer implied, or have you tried wrapping the parts that needs fixed height inside a sized box component with fixed height? Seems from the image that your fixed part is the area with the bubbles inside, so maybe use a column layout and make the first element fixed with a sized box and the second be your ListView that fills up the rest.

    Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    SizedBox(
      width: double.infinity,
      height: 300.0,
      child: Card(child: Text('your bubbles all, chinese, fast food, ... go here')),
    )
    ListView.builder(...)
  ],
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search