Zulu
Zulu

Reputation: 17

Flutter: single child scroll view is not working within positioned widget

Here is an image of the component that I am trying to make scrollable: component displaying "Following" with 5 user icons arranged sideways, fifth cut off but no scrollbar. The single child scroll view widget is not properly scrolling when I wrap it within a positioned widget. I need to have the positioned widget in order to properly align my components. How can I solve this issue?

Container(
            height: 130,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Colors.grey[800],
              borderRadius: const BorderRadius.all(const Radius.circular(10)),
            ),
            child: Stack(
              children: [
                Positioned(
                  top: 30,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: ProfilePicScroll(),
                  ),
                ),
                Positioned(
                    left: 10,
                    child: Text(
                      'Following',
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                    )),

Upvotes: 1

Views: 1516

Answers (1)

Hadi
Hadi

Reputation: 652

Two Solution.

First:

change your Positioned widget to Padding.

Stack(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 30.0),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: ProfilePicScroll(),
                ),
              ),
              const Positioned(
                left: 10,
                child: Text(
                  'Following',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
            ],
          )

second:

get all Positioned arguments a value.

Stack(
            children: [
              Positioned(
                top: 30,
                left: 0,
                right: 0,
                bottom: 0,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: ProfilePicScroll(),
                ),
              ),
              const Positioned(
                left: 10,
                child: Text(
                  'Following',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
            ],
          )

Upvotes: 4

Related Questions