Home > Enterprise >  How can I make only one slidable slide in a flutter listview?
How can I make only one slidable slide in a flutter listview?

Time:06-02

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

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

  @override
  State<MapSelectPage> createState() => _MapSelectPageState();
}

class _MapSelectPageState extends State<MapSelectPage> {
  @override
  Widget build(BuildContext context) {
    Get.put<MapSelectViewController>(MapSelectViewController());
    MapSelectViewController _controller = Get.find<MapSelectViewController>();
    return Scaffold(
      body: Obx(() {
        if (_controller.mapList.value == null) {
          return Center(
            child: TLoader.Loader(),
          );
        } else {
          return SafeArea(
            child: RefreshIndicator(
              child: ListView(
                children: [
                  _pageTitle(),
                  for (MapData data in _controller.mapList.value!) _mapButton(),
                  _createMapButton(),
                ],
              ),
              onRefresh: () async {
                _controller.getMapList();
              },
            ),
          );
        }
      }),
    );
  }
}

// 페이지 타이틀
Widget _pageTitle() {
  return Column(
    children: [
      Text(
        "지도를 선택하세요!",
        style: TText.style.displaySmall,
      )
    ],
  );
}

// 지도 생성버튼
Widget _createMapButton() {
  return Container(
    padding: const EdgeInsets.all(10),
    child: InkWell(
      onTap: () => Get.to(const MapCreatePage()),
      child: TCard(
          child: Column(
        children: [
          const SizedBox(
            height: 200,
            child: RiveAnimation.asset(
              "images/ani/new_book.riv",
            ),
          ),
          const SizedBox(height: 10),
          Text("새로운 지도를 생성하세요!!", style: TText.style.titleLarge),
        ],
      )),
    ),
  );
}

class _mapButton extends StatelessWidget {
  const _mapButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(10),
      child: TCard(
        child: Container(
          width: double.infinity,
          child: Slidable(
            endActionPane: ActionPane(
              motion: const ScrollMotion(),
              children: [
                SlidableAction(
                  icon: Icons.ac_unit,
                  label: "test",
                  onPressed: (context) {
                    print("112312");
                  },
                )
              ],
            ),
            child: Container(
              width: double.infinity,
              child: InkWell(
                onTap: () {
                  Slidable.of(context)!.close();
                },
                child: Container(
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "data",
                        style: TText.style.titleLarge,
                      ),
                      const SizedBox(height: 10),
                      Text(
                        "data",
                        style: TText.style.titleSmall,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

Above is the code using my slideable, I have an inkwell widget inside a slidable, and when I click on it, that slid should close, but it doesn't close,

═══════= Exception caught by gesture =====
Null check operator used on a null value
═══════= ===============

returns this error }

When I slide in listview slidable and click inkwell, the slid should close, but it doesn't close with an error, how can I close the slide?

Slidable.of(context)!.close();

When clicked, it becomes null.

Slidable.of(context)?.close();

Not only couldn't we do it all the way, but this was about to happen.

tcard custom widget is

import 'package:flutter/material.dart';

class TCard extends StatelessWidget {
  const TCard({
    Key? key,
    required this.child,
    this.padding = 5,
    this.onTap,
  }) : super(key: key);

  final Widget child;
  final Function()? onTap;
  final double padding;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Ink(
        padding: EdgeInsets.all(padding),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: Colors.white,
          boxShadow: const [
            BoxShadow(
              color: Colors.grey,
              offset: Offset(1, 2),
              blurRadius: 2,
              spreadRadius: 2,
            ),
          ],
        ),
        child: child,
      ),
    );
  }
}

CodePudding user response:

As for the error, You can check null before using it.

Or just replace

 Slidable.of(context)!.close();

with

 Slidable.of(context)?.close();
  • Related