NiiTii
NiiTii

Reputation: 256

How to stack the items inside a "Listview.builder" on top of each other? flutter

I want to stack the items inside a Listview.builder but when I try to do so with the Align() class and set its heightfactor: , it gives padding to the top and bottom and I don't want that, does anyone have any idea how do I stack them properly?

My center SyncfusionLinearGauge:

                      //Center SyncfusionLinearGauge 
                      Expanded(
                        child: ScrollablePositionedList.builder(
                          itemScrollController: itemController,
                          itemCount: _provider.loadedContestants.length,
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemBuilder: (context, index) {
                            final data = _provider.loadedContestants[index];
                            return Align(
                              heightFactor: 0.0001,
                              child: SfLinearGauge(
                                // showLabels: false,
                                // showTicks: false,
                                // showAxisTrack: false,
                                axisLabelStyle: TextStyle(color: Colors.white),
                                majorTickStyle: LinearTickStyle(
                                    color: Colors.white, length: 10),
                                minorTickStyle:
                                    LinearTickStyle(color: Colors.white),
                                axisTrackStyle:
                                    LinearAxisTrackStyle(color: Colors.red),
                                orientation: LinearGaugeOrientation.vertical,
                                minimum: 0,
                                maximum: 100,
                                animationDuration: 500,
                                markerPointers: [
                                  //User pointer
                                  LinearWidgetPointer(
                                    value: data.points,
                                    position: LinearElementPosition.cross,
                                    offset: 50.0,
                                    animationDuration: 2000,
                                    child: UserCardWidget(
                                      data: data,
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                      ),

My user card:

class UserCardWidget extends StatelessWidget {
  UserCardWidget({Key key, this.data}) : super(key: key);

  DemoUserModel data;

  @override
  Widget build(BuildContext context) {
    bool _isKevinTeam = data.team == 'Kevin';
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.only(left: 167.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          // mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 15,
              height: 15,
              decoration: BoxDecoration(
                color: const Color(0xff2da162),
                borderRadius: BorderRadius.all(
                  Radius.circular(50),
                ),
              ),
            ),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Text(
                  '${data.firstName.toString()}M',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                    fontFamily: "SFProText",
                    fontStyle: FontStyle.normal,
                    fontSize: 13.0,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

What I want:

enter image description here

What I have:

enter image description here

Upvotes: 0

Views: 1855

Answers (1)

NiiTii
NiiTii

Reputation: 256

What I ended up doing was removing the listview.builder all together and mapped the list in the markerPointers:[], so this is the result.

My LinearGauge:

                Expanded(
                  flex: 4,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Expanded(
                        child: SizedBox(
                          height: size.height * 0.57,
                          child: SfLinearGauge(
                            showLabels: false,
                            showTicks: false,
                            showAxisTrack: false,
                            orientation: LinearGaugeOrientation.vertical,
                            minimum: 0,
                            maximum: 100,
                            animationDuration: 500,
                            markerPointers: _sortedList
                                .asMap()
                                .map(
                                  (i, data) {
                                    return MapEntry(
                                      i++,
                                      LinearWidgetPointer(
                                        value: data.points,
                                        position: LinearElementPosition.cross,
                                        animationDuration: 2000,
                                        offset: 500,
                                        child: UserCardWidget(
                                          data: data,
                                          index: i,
                                          isExpandedMethod: _isExpanded,
                                        ),
                                      ),
                                    );
                                  },
                                )
                                .values
                                .toList(),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

This is the result:

enter image description here

Upvotes: 3

Related Questions