79266196

Date: 2024-12-09 19:16:57
Score: 1.5
Natty:
Report link

According to your requirement, you want to add scrolling functionality to the child within the parent, where currently the page scrolls along with the TabBar and TabBarView (on the home page).

If anything is unclear please let me know.

Explanation: I added height and width to the Container and used the Expanded widget to occupy all available space. This ensures that we achieve scrolling within the child.

Happy coding

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

  @override
  State<MainStuff> createState() => _MainStuffState();
}

class _MainStuffState extends State<MainStuff> with TickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.sizeOf(context);
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        surfaceTintColor: Colors.white,
        toolbarHeight: 120,
        backgroundColor: Colors.white,
        centerTitle: false,
        title: Text("testing scrolling"),
        scrolledUnderElevation: 20,
        elevation: 20,
      ),
      body: SingleChildScrollView(
        child: Container(
          height: size.height,
          width: size.width,
          child: Column(
            children: [
              Material(
                elevation: 10,
                shadowColor: Colors.black26,
                color: Colors.white,
                child: TabBar(
                  labelColor: Colors.green[700],
                  labelStyle: TextStyle(fontWeight: FontWeight.w800),
                  tabs: [
                    Tab(
                      text: "Home",
                      icon: Icon(Icons.home),
                    ),
                    Tab(
                      text: "Our Story",
                      icon: Icon(Icons.people_alt),
                    ),
                    Tab(
                      text: "Shop",
                      icon: Icon(Icons.storefront_outlined),
                    ),
                    Tab(
                      text: "Special Offers",
                      icon: Icon(Icons.star),
                    ),
                    Tab(
                      text: "Contact Us",
                      icon: Icon(Icons.call),
                    )
                  ],
                  controller: _tabController,
                ),
              ),
              Expanded(
                child: Container(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      Home(),
                      Center(child: Text("Our Story")),
                      Center(child: Text("Shop")),
                      Center(child: Text("Special Offers")),
                      Center(child: Text("Contact Us")),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<String> images = ["1.png", "2.png"];
  PageController _sliderController = PageController();
  int currImage = 0;
  late PageView image_carousel;
  @override
  void initState() {
    super.initState();
    image_carousel = PageView.builder(
      controller: _sliderController,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) => Image.asset(
       "images/slider_images/${images[index % images.length]}",
        // fit: BoxFit.cover,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 400),
          child: Stack(children: [
            image_carousel,
            Align(
              alignment: Alignment.centerLeft,
              child: ElevatedButton(
                  onPressed: () {
                    _sliderController.previousPage(
                        duration: Duration(seconds: 1), curve: Curves.easeIn);
                  },
                  style: ElevatedButton.styleFrom(
                      elevation: 0,
                      shape: CircleBorder(),
                      backgroundColor: Colors.white70,
                      foregroundColor: Colors.black),
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Icon(
                      Icons.arrow_back_ios_rounded,
                      size: 40,
                    ),
                  )),
            ),
            Align(
              alignment: Alignment.centerRight,
              child: ElevatedButton(
                  onPressed: () {
                    _sliderController.nextPage(
                        duration: Duration(seconds: 1), curve: Curves.easeIn);
                  },
                  style: ElevatedButton.styleFrom(
                      elevation: 0,
                      shape: CircleBorder(),
                      backgroundColor: Colors.white70,
                      foregroundColor: Colors.black),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Icon(
                      Icons.arrow_forward_ios_rounded,
                      size: 40,
                    ),
                  )),
            )
          ]),
        ),
        Container(
          height: 100,
          width: 400,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(children: List.generate(4, (index) =>  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    padding: const EdgeInsets.all(8.0),
                    child:
                        Image(image: AssetImage("assets/images/options_banner.png"))),)),
          ),
        )
      ],
    );
  }
Reasons:
  • RegEx Blacklisted phrase (2.5): please let me know
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: Sahil Kundaliya