Monday, July 15, 2024
HomeiOS Developmentandroid - The Slidable element generally goes on prime of different elements...

android – The Slidable element generally goes on prime of different elements and generally beneath – FLUTTER


Description:

I’m encountering a difficulty with the Slidable element in a ListView in Flutter. The habits of the Slidable element is inconsistent relying on the variety of objects within the listing.

Drawback:

  • When the ListView doesn’t have sufficient objects to require scrolling, the Slidable element seems on prime of all different elements when slid.
  • Nevertheless, when the ListView has sufficient objects to allow scrolling, the Slidable element goes beneath different elements when slid.

Video of the issue:

Video

Code:

/* Occasions.dart */

Widget construct(BuildContext context) {
    return Container(
      clipBehavior: Clip.none,
      margin: const EdgeInsets.solely(prime: 5, backside: 5, left: 10, proper: 10),
      youngster: ListView.builder(
        itemCount: widget.lista.size,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Stack(clipBehavior: Clip.none, youngsters: [
            Positioned.fill(
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.only(bottom: 6),
                      decoration: const BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.all(Radius.circular(8))),
                    ),
                  ),
                ],
              ),
            ),
            Slidable(
              key: UniqueKey(),
              endActionPane: ActionPane(
                  extentRatio: 0.2,
                  movement: const BehindMotion(),
                  youngsters: [
                    GestureDetector(
                      onTap: () {
                        delete(context, widget.lista[index]);
                      },
                      youngster: Container(
                        margin: const EdgeInsets.solely(backside: 6),
                        padding: const EdgeInsets.solely(left: 30),
                        ornament: const BoxDecoration(
                          borderRadius: BorderRadius.horizontal(
                              proper: Radius.round(15)),
                          coloration: Colours.purple,
                        ),
                        alignment: Alignment.middle,
                        youngster: const Icon(Icons.delete_forever,
                            coloration: Colours.white),
                      ),
                    ),
                  ]),
              youngster: GestureDetector(
                onTap: () {
                  Navigator.of(context).push(widget.motion(
                      fetchRep: widget.fetchRep,
                      knowledge: widget.knowledge,
                      replace: widget.replace,
                      motion: "mod_el",
                      report: widget.lista[index]));
                },
                youngster: Container(
                  padding: const EdgeInsets.all(10),
                  margin: const EdgeInsets.solely(backside: 6),
                  // margin: const EdgeInsets.fromLTRB(10, 3, 10, 3),
                  ornament: BoxDecoration(
                    borderRadius: BorderRadius.round(8),
                    border: Border.all(coloration: Colours.white, width: 1),
                    coloration: HexColor.fromHex(widget.lista[index].coloration),
                  ),
                  youngster: Row(
                    youngsters: [
                      Row(
                        children: [
                          Icon(
                            widget.lista[index].reportType == "R"
                                ? Icons.project
                                : Icons.bookmark,
                            coloration: Colours.white,
                            dimension: 20,
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                        ],
                      ),
                      Middle(
                        youngster: Textual content(
                          "[  ${int.parse(widget.lista[index].amount).toStringAsFixed(2)} ${widget.lista[index].unityCode}  ]",
                          type: const TextStyle(
                              coloration: Colours.white,
                              fontSize: 14,
                              fontWeight: FontWeight.daring),
                        ),
                      ),
                      const SizedBox(
                        width: 20,
                      ),
                      Expanded(
                        youngster: Textual content(
                          "${widget.lista[index].customerCode} - ${widget.lista[index].taskTypeCode}",
                          overflow: TextOverflow.ellipsis,
                          type: const TextStyle(
                              coloration: Colours.white,
                              fontSize: 14,
                              fontWeight: FontWeight.daring),
                          textAlign: TextAlign.middle,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ]);
        },
      ),
    );
  }
/* ContainerEvents.dart */ 

Widget construct(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.solely(prime: 15),
      youngster: AnimatedVisibility(
          enter: fadeIn(),
          exit: fadeOut(),
          youngster: Container(
              width: MediaQuery.of(context).dimension.width,
              ornament: BoxDecoration(
                borderRadius: BorderRadius.round(10),
                coloration: Theme.of(context).colorScheme.tertiaryContainer,
              ),
              youngster: widget.loading
                  ? Middle(
                      youngster: LoadingAnimationWidget.staggeredDotsWave(
                        coloration:
                            Theme.of(context).colorScheme.onTertiaryContainer,
                        dimension: 80,
                      ),
                    )
                  : Column(
                      youngsters: [
                        const SizedBox(
                          height: 10,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Text(
                                "${DateFormat.EEEE('it_IT').format(widget.selezionato)}, ${DateFormat.MMMd('it_IT').format(widget.selezionato)}, ${DateFormat.y('it_IT').format(widget.selezionato)}",
                                style: TextStyle(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .onTertiaryContainer,
                                    fontSize:
                                        MediaQuery.of(context).size.height /
                                            100 *
                                            2.5,
                                    fontWeight: FontWeight.bold)),
                            ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: Theme.of(context)
                                      .colorScheme
                                      .inverseSurface,
                                ),
                                onPressed: () {
                                  showModalBottomSheet(
                                    transitionAnimationController:
                                        AnimationController(
                                            vsync: Navigator.of(context),
                                            duration: const Duration(
                                                milliseconds: 600))
                                          ..forward(),
                                    context: context,
                                    isScrollControlled: true,
                                    builder: (context) => Filterbox(
                                        fetchRep: widget.fetchRep,
                                        data: widget.data,
                                        aggiornaData: widget.dayReload),
                                  );
                                },
                                child: Icon(
                                  Icons.filter_alt,
                                  color: Theme.of(context).colorScheme.surface,
                                ))
                          ],
                        ),
                        const SizedBox(
                          top: 10,
                        ),
                        Expanded(
                            youngster: Padding(
                          padding: const EdgeInsets.solely(backside: 5),
                          youngster: Occasions(
                              knowledge: widget.selezionato,
                              lista: widget.lista,
                              motion: widget.createRoute,
                              fetchRep: widget.fetchRep,
                              replace: widget.replace),
                        )),
                      ],
                    ))),
    );
  }

What I’ve Tried:

  • I’ve experimented with completely different Stack and Positioned configurations.

What I Need:

  • I need all of the sliders to at all times be on prime of different elements.



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments