1

I am developing a task book, most of the tasks I have implemented but there is one that I can't solve, when I add a task it is added to the end of the list, and I want it to be at the top of the list. And also there is a problem when the theme changes, I want that if the theme is black, the text "Tasks +" were white and vice versa. Here is my code:

import 'package:flutter/material.dart';


void main(){
  runApp(MaterialApp(
    home: App(),
  ));
}

class ListItem{
  String todoText;
  bool todoCheck;
  ListItem(this.todoText, this.todoCheck);
}

class _strikeThrough extends StatelessWidget{

  final String todoText;
  final bool todoCheck;
  _strikeThrough(this.todoText, this.todoCheck) : super();

  Widget _widget(){
    if(todoCheck){
      return Text(
        todoText,
        style: TextStyle(
          fontSize: 22.0,

        ),
      );
    }
    else{
      return Text(
        todoText,
        style: TextStyle(
            fontSize: 22.0
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context){
    return _widget();
  }
}

const Color ColorTextW =  Colors.black;
class App extends StatefulWidget{

  @override
  AppState createState(){
    return AppState();
  }
}
final ValueNotifier<ThemeMode> _notifier = ValueNotifier(ThemeMode.light);

late Color ColorType =  Colors.black;

class AppState extends State<App> {
  bool valText = true;
  var counter = 0;
  var IconsType =  Icons.wb_sunny  ;

  late Color ColorType =  Colors.black;

  var textController = TextEditingController();
  var popUpTextController = TextEditingController();

  List<ListItem> WidgetList = [];

  @override
  void dispose() {
    textController.dispose();
    popUpTextController.dispose();
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: _notifier,
        builder: (_, mode, __) {
          return MaterialApp(
              theme: ThemeData.light(),
              darkTheme: ThemeData.dark(),
              themeMode: mode, // Decides which theme to show, light or dark.
              home: Scaffold(
                appBar: AppBar(
                  title: Text("Список задач"),
                  actions: <Widget>[
                    IconButton(
                      icon: Icon(IconsType,color : ColorType
                      ),
                      onPressed:() =>
                      {
                        if (_notifier.value == ThemeMode.light) {
                          _notifier.value =  ThemeMode.dark,
                          IconsType = Icons.dark_mode,
                          ColorType = Colors.white,

                        } else
                          {
                            _notifier.value =  ThemeMode.light,
                            IconsType = Icons.wb_sunny,
                            ColorType = Colors.black,
                          }
                      }
                    )
                  ],
                  //backgroundColor: Colors.orange[500],
                  iconTheme: IconThemeData(
                      color: Colors.white
                  ),
                ),
                body: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[

                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,

                        children: <Widget>[
                          const Text(
                            "Tasks",
                            style: TextStyle(
                              fontSize: 70.0,
                              fontWeight: FontWeight.bold,
                              color:  ColorTextW,
                            ),
                          ),
                          IconButton(
                                color: Colors.black,
                                iconSize: 70,
                                constraints: const BoxConstraints(),
                                padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
                                icon: const Icon(Icons.add_outlined),
                                onPressed: ()  {
                                  if (textController.text.replaceAll(" ", "").isNotEmpty) {
                                    WidgetList.add(
                                        new ListItem(textController.text.replaceAll(" ", ""), false));
                                    setState(() {
                                      valText = true;
                                      textController.clear();

                                    });
                                  }
                                  else
                                  {
                                    setState(() {
                                      valText = false;
                                    });
                                  }
                                },


                              )




                        ],
                      ),

                    ),
                    Container(
                      width: MediaQuery
                          .of(context)
                          .size
                          .height * 0.45,
                      child: TextField(

                        style: TextStyle(
                          fontSize: 22.0,
                          //color: Theme.of(context).accentColor,
                        ),
                        controller: textController,
                        cursorWidth: 5.0,
                        autocorrect: true,
                        autofocus: true,
                        //onSubmitted: ,
                      ),
                    ),
                    Align(
                        child:
                        (valText == false) ?
                        Align(child: Text(("Задача пустая"),
                            style: TextStyle(
                                fontSize: 25.0, color: Colors.red)),
                            alignment: Alignment.center) :
                        Align(child: Text((""),),
                            alignment: Alignment.center)),
                    Expanded(
                      child: ReorderableListView(
                        children: <Widget>[
                          for(final widget in WidgetList)
                            GestureDetector(
                              key: Key(widget.todoText),
                              child: Dismissible(
                                key: Key(widget.todoText),
                                child: CheckboxListTile(
                                  controlAffinity: ListTileControlAffinity.leading,
                                  //key: ValueKey("Checkboxtile $widget"),
                                  value: widget.todoCheck,
                                  title: _strikeThrough(
                                      widget.todoText, widget.todoCheck),
                                  onChanged: (checkValue) {
                                    //_strikethrough toggle
                                    setState(() {
                                      if (!checkValue!) {
                                        widget.todoCheck = false;
                                      }
                                      else {
                                        widget.todoCheck = true;
                                      }
                                    });
                                  },
                                ),
                                background: Container(
                                  child: Icon(Icons.delete),
                                  alignment: Alignment.centerRight,
                                  color: Colors.redAccent,
                                ),

                                direction: DismissDirection.endToStart,
                                movementDuration: const Duration(
                                    milliseconds: 200),
                                onDismissed: (dismissDirection) { //Delete Todo
                                  WidgetList.remove(widget);

                                },
                              ),
                            )
                        ],
                        onReorder: (oldIndex, newIndex) {
                          setState(() {
                            if (newIndex > oldIndex) {
                              newIndex -= 1;
                            }
                            var replaceWiget = WidgetList.removeAt(oldIndex);
                            WidgetList.insert(newIndex, replaceWiget);
                          });
                        },
                      ),
                    )
                  ],
                ),
              )
          );
        }
    );
  }
}
Andrii Havrylyak
  • 675
  • 6
  • 16

1 Answers1

1

In the onPressed method of your Add-IconButton do the following:

WidgetList.insert(0, new ListItem(textController.text.replaceAll(" ", ""), false));

This will insert the new item at the top of the existing list ^^

Josip Domazet
  • 2,246
  • 2
  • 14
  • 37
  • Thank you very much, this is what you need, you can suggest something about the color "Tasks" and "+", I can not understand how to change the color to the opposite if the theme changes. thank you) – Andrii Havrylyak May 03 '22 at 15:21
  • @AndriiHavrylyak Glad it helped. Regarding the other part of your question (dark mode) I would suggest implementing a general dark mode. I personally always use the approach from this SO question: https://stackoverflow.com/questions/60232070/how-to-implement-dark-mode-and-light-mode-in-flutter – Josip Domazet May 03 '22 at 15:23
  • Thanks for the information) and one more question, I want to make sure that these tasks that I created are stored in the repositories on the device, because they are now being restarted and deleted (but unfortunately I have not worked with the repositories yet). This project will be difficult to rework to store data in the repository ?? – Andrii Havrylyak May 03 '22 at 16:40
  • So you want to persist the data? There are several approaches but you are probably looking for sqlite database (on the device): https://docs.flutter.dev/cookbook/persistence – Josip Domazet May 03 '22 at 16:48
  • I want to save on the phone, that is, I created a task, closed programs. And after I enter this program after a while, this task will be on my list (along with the status completed / not completed)I read about shared_preferences and get. But when you did not work with him, everything looks very confusing. I decided to ask you) – Andrii Havrylyak May 03 '22 at 16:58
  • I would not implement this feature with sharedpreferences. I would use a sqlite database: https://docs.flutter.dev/cookbook/persistence/sqlite Do you have previous experience with SQL? – Josip Domazet May 03 '22 at 17:02
  • also no, I'm new to flutter). I want to find a way to realize my ideas in the best and most optimal way. – Andrii Havrylyak May 03 '22 at 17:06
  • Alright then I would probably have a look at some basic database tutorial (sql). And then afterwards when you have a basic understanding of databases and sql you can try to follow flutters sqllite guide step by step: https://docs.flutter.dev/cookbook/persistence/sqlite – Josip Domazet May 03 '22 at 17:11
  • thank you)will try, I have a lot of experience with Oracle) – Andrii Havrylyak May 03 '22 at 17:13