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

How to set the height of a PageView.builder in Flutter based on screen size?

I am having an issue with the height of a PageView.builder in Flutter. I want to set the height based on the screen size. I tried using MediaQuery to set the height, but I’m still facing the issue.

I tried setting the height using MediaQuery like this:

final Size size = MediaQuery.of(context).size;
height: size.height / 2 * 1.2,

Here is the full code for my PageView.builder :

SizedBox(
    height: size.height / 2 * 1.2,
    child: PageView.builder(
      controller: _pageController,
      onPageChanged: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
      itemCount: 3,
      physics: const PageScrollPhysics(),
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.only(top: 50, left: 0, right: 20),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.accents[index].withOpacity(0.5),
            ),
            // height: size.height / 2,
            // width: size.width / 2 * 1.5,
            child: Padding(
              padding: const EdgeInsets.all(30.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Plan ${index + 1}',
                    style: const TextStyle(
                        fontSize: 20, fontWeight: FontWeight.w500),
                  ),
                  Constants.height10,
                  const Text(
                    'Lorem ipsum dolor sit amet, consectetur itd ',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Constants.height20,
                  ListView.separated(
                    shrinkWrap: true,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return Row(
                        children: const [
                          CircleAvatar(
                            radius: 3,
                            backgroundColor: Colors.black,
                          ),
                          SizedBox(width: 10),
                          Text('Lorem ipsum dolor sit '),
                        ],
                      );
                    },
                    separatorBuilder: (context, index) => Constants.height10,
                  ),
                  const Divider(thickness: 2),
                  Row(
                    children: const [
                      Text(
                        '$199/',
                        style: TextStyle(
                          fontSize: 32,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Text(
                          'month',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
        );
      },
    ),
  );

But I’m still having the problem, as shown in this screenshot of two different sized screens:

enter image description here

I tried giving more space to avoid overflow, but when it comes to bigger screens, the PageView.builder becomes oversized and makes the UI look bad. I want to make the PageView.builder look like it does on iPhone screen on the given screenshot.

Can someone help me to properly set the height of the PageView.builder based on screen size in Flutter?.
thank you for your time

Tags:

2

Answers


  1. 0

    It is better to use LayoutBuilder for responsive design, For your case , wrap the ListView with Expanded widget and follow

    
class PWF4 extends StatefulWidget {
  const PWF4({super.key});

  @override
  State<PWF4> createState() => _PWF4State();
}

class _PWF4State extends State<PWF4> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final size = Size(constraints.maxWidth, constraints.maxHeight);

          return Column(
            children: [
              SizedBox(
                height: size.height / 2 * 1.2,
                child: PageView.builder(
                  // controller: _pageController,
                  onPageChanged: (index) {
                    setState(() {
                      // _currentIndex = index;
                    });
                  },
                  itemCount: 3,
                  physics: const PageScrollPhysics(),
                  itemBuilder: (context, index) {
                    return Padding(
                      padding:
                          const EdgeInsets.only(top: 50, left: 0, right: 20),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: Colors.accents[index].withOpacity(0.5),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(30.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'Plan ${index + 1}',
                                style: const TextStyle(
                                    fontSize: 20, fontWeight: FontWeight.w500),
                              ),
                              // Constants.height10,
                              const Text(
                                'Lorem ipsum dolor sit amet, consectetur itd ',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              // Constants.height20,
                              SizedBox(height: 20),
                              Expanded(
                                child: ListView.separated(
                                  itemCount: 10,
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return Row(
                                      children: const [
                                        CircleAvatar(
                                          radius: 3,
                                          backgroundColor: Colors.black,
                                        ),
                                        SizedBox(width: 10),
                                        Text('Lorem ipsum dolor sit '),
                                      ],
                                    );
                                  },
                                  separatorBuilder: (context, index) =>
                                      SizedBox(height: 10),
                                ),
                              ),
                              const Divider(thickness: 2),
                              Row(
                                children: const [
                                  Text(
                                    '$199/',
                                    style: TextStyle(
                                      fontSize: 32,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: 20),
                                    child: Text(
                                      'month',
                                      style: TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

    More about adaptive-design

    Login or Signup to reply.
  2. 0 
    height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search