I am doing a basic tasks app. When there is a text saved from textfield it appears below in the same page in expanded view. I want to make the final task to go above the previous one but when I do reverse: true, it sends the first task to the bottom of the page. Can I make the first task to appear above and each new task to appear above the one posted before?

You can view my code here:

 body: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: const EdgeInsets.only(left: 8, top: 16),
            child: const Text(
              'Enter your task',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            padding: const EdgeInsets.only(top: 16, right: 8),
            child: TextButton.icon(
                onPressed: () {
                  setState(() {
                    tasks.add(textController.text);
                  });
                },
                icon: const Icon(Icons.save),
                label: const Text('Save')),
          ),
        ],
      ),
      Padding(
        padding: const EdgeInsets.only(top: 16, right: 8, left: 8),
        child: TextField(
          controller: textController,
          style: const TextStyle(color: Colors.black),
          decoration: InputDecoration(
              fillColor: Colors.grey.shade200,
              filled: true,
              hintStyle: TextStyle(color: Colors.grey.shade400),
              hintText: "Type whatever you want",
              border: OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: BorderRadius.circular(15),
              )),
        ),
      ),
      const SizedBox(height: 16),
      Container(
          padding: const EdgeInsets.only(left: 8),
          child: const Text(
            'Tasks',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          )),
      const SizedBox(height: 16),
      Expanded(
        child: tasks.length > 0
            ? ListView.builder(
                reverse: false,
                itemCount: tasks.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 100,
                      color: Colors.grey,
                      child: Text('${tasks[index]}'),
                    ),
                  );
                })
            : Center(
                child: Text('No Tasks Yet'),
              ),
      ),
    ],
  ),

CodePudding user response：

Concept - use listname.insert(int index,element) function to add element at a particular position in your case it is position 1 (after 0)

int i = 0 ;
    body: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    padding: const EdgeInsets.only(left: 8, top: 16),
                    child: const Text(
                      'Enter your task',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(top: 16, right: 8),
                    child: TextButton.icon(
                        onPressed: () {
tasks.isempty == true? i = 0 : i = 1;
                          setState(() {
                            tasks.insert(i,textController.text);
                          });
                        },
                        icon: const Icon(Icons.save),
                        label: const Text('Save')),
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16, right: 8, left: 8),
                child: TextField(
                  controller: textController,
                  style: const TextStyle(color: Colors.black),
                  decoration: InputDecoration(
                      fillColor: Colors.grey.shade200,
                      filled: true,
                      hintStyle: TextStyle(color: Colors.grey.shade400),
                      hintText: "Type whatever you want",
                      border: OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.circular(15),
                      )),
                ),
              ),
              const SizedBox(height: 16),
              Container(
                  padding: const EdgeInsets.only(left: 8),
                  child: const Text(
                    'Tasks',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  )),
              const SizedBox(height: 16),
              Expanded(
                child: tasks.length > 0
                    ? ListView.builder(
                        reverse: false,
                        itemCount: tasks.length,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              height: 100,
                              color: Colors.grey,
                              child: Text('${tasks[index]}'),
                            ),
                          );
                        })
                    : Center(
                        child: Text('No Tasks Yet'),
                      ),
              ),
            ],
          ),

CodePudding user response：

Try This i use this method when i want to reverse and list

Expanded(
        child: tasks.length > 0
            ? ListView.builder(
                reverse: false,
                itemCount: tasks.length,
                itemBuilder: (context, index) {
            int rIndex = tasks.length - 1 - index;
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 100,
                      color: Colors.grey,
                      child: Text('${tasks[rIndex]}'),
                    ),
                  );
                })
            : Center(
                child: Text('No Tasks Yet'),
              ),
      ),