Flutter Dismissible background goes up after list item is dismissed

Question

I just started learning flutter and am trying to build a todo app, the problem I encountered was the widget buildActionSwipeLeft() set as dismissible background goes up rather than left to right after the list item is dismissed although I set the direction of the dismissible from left to right or start to end. Any help would be appreciated.

My code:

  Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    child: Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(
        horizontal: 24.0,
      ),
      color: const Color(0xfff6f6f6f6),
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: const EdgeInsets.only(bottom: 32.0, top: 32.0),
                child: const Text(
                  "Reminders",
                  style: TextStyle(
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold
                  ),
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: todos.length,
                  physics: const BouncingScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                          padding: const EdgeInsets.only(
                            bottom: 15.0
                          ),
                          child: Card(
                            color: Colors.white,
                            shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16),
                            ),
                            elevation: 4,
                            child: ClipRRect(
                              clipBehavior: Clip.antiAlias,
                              child: Dismissible(
                                  background: buildActionSwipeLeft(),
                                  onDismissed: (direction) {
                                    setState(() {
                                      todos.removeAt(index);
                                      _titleController.removeAt(index);
                                      _detailController.removeAt(index);
                                    });
                                  },
                                  direction: DismissDirection.startToEnd,
                                  key: UniqueKey(),
                                  child: Container(
                                      width: double.infinity,
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 13.0,
                                          horizontal: 24.0
                                      ),
                                      margin: const EdgeInsets.only(
                                        bottom: 20.0,
                                      ),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          TextField(
                                            cursorColor: Colors.black,
                                            controller: _titleController[index],
                                            style: const TextStyle(
                                                fontSize: 22.0,
                                                fontWeight: FontWeight.bold
                                            ),
                                            decoration: const InputDecoration(
                                              hintText: "Enter a title",
                                              border: InputBorder.none,
                                            ),
                                          ),
                                          const Divider(
                                            color: Colors.black,
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(top: 0.0),
                                            child: TextField(
                                              controller: _detailController[index],
                                              style: TextStyle(
                                                fontSize: 20.0,
                                                color: Colors.grey[900],
                                              ),
                                              cursorColor: Colors.black,
                                              maxLines: null,
                                              decoration: const InputDecoration(
                                                  hintText: "Enter the description",
                                                  label: Text("description"),
                                                  border: InputBorder.none
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                ),
                            ),
                          ),
                        );
                  },
                ),
              )
            ],
          ),
          Positioned(
            bottom: 24.0,
            right: 0.0,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  todos.add('');
                  _titleController.add(TextEditingController());
                  _detailController.add(TextEditingController());
                });
              },
              child: Container(
              width: 60.0,
              height: 60.0,
              decoration: BoxDecoration(
                color: Colors.black87,
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: const Icon(Icons.add, color: Colors.white, size: 35.0),
              ),
            ),
          )
        ],
      ),
    ),
  ),
);
  }
}

Widget buildActionSwipeLeft() => Container(
    alignment: Alignment.centerLeft,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16.0),
      color: Colors.redAccent,
    ),
    padding: const EdgeInsets.symmetric(horizontal: 30),
    child: const Icon(Icons.delete, color: Colors.white, size: 30),
  );

Answer 1

I figured out that this was not an issue as this is the default animation thats played when a list tile wrapped in a dismissible widget is dismissed. And the dismiss direction just determines the direction in which you can swipe the widget and not the direction in which the widget animates after dismissal.