Unable to add different widgets in a single scroll view in flutter

Question

So, i am having a container with height as the screen height, and singlechildscrollview as its child.

code:-

Stack(
      children: [
        Container(
            alignment: Alignment.center,
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/coverPhoto.jpg'),
                  fit: BoxFit.cover,
                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(opacity), BlendMode.srcATop),
                )
            ),
          child: NestedScrollView(
            controller: controller,
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: MediaQuery.of(context).size.height*2/3,
                  floating: false,
                  elevation: 0.0,
                  backgroundColor: Colors.transparent,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      title: SingleChildScrollView(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Some text",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.w500,
                                color: Colors.white,
                              ),
                            ),
                            SizedBox(height: 25,),
                            Text(
                              "Some heading",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 40,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ),
                  ),
                ),
              ];
            },
            body: Center(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(height: MediaQuery.of(context).size.height*3/4,),
                    Container(
                      width: MediaQuery.of(context).size.width*7/10,
                      color: const Color(0xff262626),
                      padding: EdgeInsets.symmetric(vertical: 40,horizontal: 100),
                      child: Column(
                        children: [
                          Text(
                            "Heading",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 50,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                          SizedBox(height: 80,),
                          Text(
                            "a content of 3-4 lines",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.w500,
                              color: Colors.white,
                            ),
                          )
                        ],
                      ),
                    ),
                    SizedBox(height: MediaQuery.of(context).size.height/4,),
                    abcWidget(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    )

Code for abcWidget():-

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

  @override
  _abcWidgetState createState() => _abcWidgetState();
}

class _abcWidgetState extends State<abcWidget> with SingleTickerProviderStateMixin{
  TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Container serviceTile({String serviceName, String content, String fileName,double width})
  {
    return Container(
      color: const Color(0xff171717),
      padding: EdgeInsets.fromLTRB(5, 20, 5, 10),
      child: Column(
        children: [
          Image.asset('assets/services/$fileName.png',height: width/3.5,),
          Text(
            serviceName,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 22.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 10,),
          Text(
            content,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
              fontWeight: FontWeight.w400,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height, // if i remove this height
      padding: EdgeInsets.symmetric(horizontal: 200),
      width: double.infinity,
      color: const Color(0xff000000),
      child: Column(
        children: [
          Container(
            decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: const Color(0xff0974b3),
                    width: 2.0,
                  ),
                ),
            ),
            child: Text(
              "OUR SERVICES",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 50.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(height: 30,),
          Text(
            "We design & build brands,campaigns & digital projects for businesses large & small.",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w400,
              fontSize: 16.0,
            ),
          ),
          Text(
            "Outstanding Service is Our Duty.",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w400,
              fontSize: 16.0,
            ),
          ),
          SizedBox(
            height: 50,
            width: MediaQuery.of(context).size.width*1.1/3,
            child: TabBar(
              controller: _tabController,
              unselectedLabelColor: Colors.grey,
              indicatorColor: Colors.white,
              labelColor: Colors.white,
              tabs: [
                Tab(text: "Show All",),
                Tab(text: "Design",),
                Tab(text: "Marketing",),
                Tab(text: "Development",),
              ],
            ),
          ),
          SizedBox(height: 15,),
          Expanded(
            child: TabBarView(
              physics: NeverScrollableScrollPhysics(),
              controller: _tabController,
              children: List.generate(4, (index) => GridView.count(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                crossAxisCount: 3,
                mainAxisSpacing: 15.0,
                crossAxisSpacing: 15.0,
                children: [
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                  serviceTile(
                    serviceName: "Web Development",
                    content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
                    fileName: "web development",
                    width: MediaQuery.of(context).size.width/4,
                  ),
                ],
              ),),
            ),
          ),
        ],
      ),
    );
  }
}

If i remove the height from the above widget from the container as commented in the code then i get the below error:-

error:-

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

And if i don't then i don't get the scrolling in this widget.

Maikzen · Accepted Answer · 2021-05-11 09:28:04Z

0

Because you cant use a Expanded into Column thats inside of a Scrollview. Think about that: expanded into column use all vertical space posible, so need a parent with height to work right.

answered May 11, 2021 at 9:28

Maikzen

1,6072 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deepak Lohmod Over a year ago

Ya i understood the logic but i dont want to give a static height to the container. I want it to have dynamic height based on the gridview elements

Maikzen Over a year ago

I understand... whats happens if you remove Expanded parent? should adjust to child size

Shoaib · Accepted Answer · 2023-03-13 04:58:40Z

0

Use SizedBox to fix your problem, the scrolling area will grow as column height.

SingleChildScrollView(
  child: SizedBox(
    width: double.infinity,
    child: Column(
      children: [Text('Text1'), Text('Text2')],
    ),
  ),
);

answered Mar 13, 2023 at 4:58

Shoaib

1,32515 silver badges24 bronze badges

Collectives™ on Stack Overflow

Unable to add different widgets in a single scroll view in flutter

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related