Unable to scroll in a Container with PageView.builder in Flutter

Question

enter code hereI'm having trouble scrolling through a PageView.builder widget that's embedded inside a Container in Flutter. I've tried setting the physics property of the PageView.builder to AlwaysScrollableScrollPhysics(), but it doesn't seem to work. The container itself has a fixed height and a background color of green.

I've tried setting the physics property of the PageView.builder to AlwaysScrollableScrollPhysics(), which I expected to enable scrolling within the Container. However, it didn't seem to work as I couldn't scroll through the pages. I suspect there may be a conflict with other widgets in my widget tree, but I'm not sure how to fix it. I'm trying to implement a PageView.builder widget inside a Container in Flutter, but I'm having trouble scrolling through the pages. Here's the code I'm using:

import 'package:duanflutter1/values/app_colors.dart';
import 'package:duanflutter1/values/app_styles.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: AppColor.primaryColor,
      appBar: AppBar(
        // backgroundColor: Colors.red,
        elevation: 0,
        title: Text(
          "Hello",
          style: AppStyles.h4.copyWith(color: Colors.blue, fontSize: 36),
        ),
        leading: InkWell(
          onTap: () {},
          child: Image.asset(AppAssets.menu),
        ),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          children: [
            Container(
                height: size.height * 1 / 10,
                padding: const EdgeInsets.all(16),
                alignment: Alignment.centerLeft,
                child: Text("It is bakdkad dkad fkaw fkjaw")),
            Container(
              height: size.height * 2 / 3,
              color: Colors.green,
              child: PageView.builder(
                  itemCount: 5,
                  itemBuilder: (context, index) {
                    return Container(
                      padding: const EdgeInsets.all(25),
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.all(Radius.circular(24))
                      ),
                    );
                  }),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.amber,
        onPressed: () {
          print("exChange");
        },
        child: Image.asset(AppAssets.reload),
      ),
    );
  }
}

what is your test device – Md. Yeasin Sheikh Mar 01 '23 at 11:26 — Md. Yeasin Sheikh, Mar 01 '23 at 11:26

score 0 · Answer 1 · answered Mar 01 '23 at 11:34

I suspect you are using the mouse to scroll. It has been disabled as default on chrome/desktop, but you can enable it on theme-level or just wrapping the widget.

Container(
  height: size.height * 2 / 3,
  color: Colors.green,
  child: ScrollConfiguration(
    behavior: ScrollConfiguration.of(context).copyWith(
      dragDevices: {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      },
    ),
    child: PageView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return Container(
            padding: const EdgeInsets.all(25),
            decoration: BoxDecoration(
                color: Colors.red,
                borderRadius:
                    BorderRadius.all(Radius.circular(24))),
          );
        }),
  ),
)

Unable to scroll in a Container with PageView.builder in Flutter

1 Answers1