Write a very beautiful project of flutter todo list


Write a very beautiful project of flutter todo list

Write a very beautiful project of flutter todo list


It took more than a month to complete the todo list project written by flutter! Now, it’s finally going to be open source.

Before the introduction, let’s have a brief look at the operation effect of the real machine

Write a very beautiful project of flutter todo list


“One day list” is a small, simple and beautiful app, which can help you record daily plans. If you happen to have the habit of writing task plans, it must be very suitable for you.

Next, for users and developers, I will introduce them once in the future

User oriented introduction

Rich theme selection

In the app, you can select various theme colors in the theme switching interface to switch. The app comes with six default themes, which are the color matching that I have selected after many attempts. You can also choose a custom theme color

Write a very beautiful project of flutter todo list
Write a very beautiful project of flutter todo list

Rich task icons

In the app, each task will have an icon, and the app provides theMaterial designStyle icon. These icons, you can also customize any color

Write a very beautiful project of flutter todo list
Write a very beautiful project of flutter todo list

Diverse custom combinations

In app, there are many other operations that you can customize

For example, the head display content of the homepage slide bar. Of course, there are other operations that you can experience on your own

Write a very beautiful project of flutter todo list
Write a very beautiful project of flutter todo list

Complete list

When you have completed a task, it will be transferred from the home page to the completion list page, where you can see some additional information about the task

Write a very beautiful project of flutter todo list

So that’s the end of the user introduction

Here is the time for developers to introduce!

Introduction to developers

If you’re interested in flutter and you don’t take action, don’t hesitate to get on the bus! This project is perfect for novice drivers.

Developers, please hold your hair. Let me show you the internal structure of this project

Third party Library

Some excellent third-party libraries are used in the project. Thank you very much for keeping my hair healthy

Here is the information about these controls

control Explain
dio Network request
shared_preferences Local storage
provider State management
test unit testing
carousel_slider Slide control
circle_list Ring list
intl Intl language pack
sqflite Local database
flutter_colorpicker Color frame
cached_network_image Picture cache
image_picker Picture selection
permission_handler Authority application
path_provider Path acquisition
image_crop KJNova Clipper
flutter_svg Svg analysis
package_info Get package information
flutter_webview_plugin Webpage
pull_to_refresh Pull up load
photo_view Picture display
url_launcher Can be used to open the store
open_file Open the file for Android update, download and install the package

Project architecture

The state management framework used by the project isProvider, and the architecture of the whole project is as follows

Write a very beautiful project of flutter todo list

  • The view layer is used to display the layout, which is basically a variety ofChangeNotifierProviderWrappedStatelessWidgetpage
  • The model layer is used to process data. It is inheritedChangeNotifierVarious model classes of
  • The logic layer will not save any data, only logic operation

Does it look like AndroidMVPHow similar is the pattern? In fact, they are almost the same, but the names are slightly different. You can also regard the above pattern as MVP pattern.

Flutter can be said to be particularly suitable for this architecture mode, because the view changes with the data, you basically don’t need to care about the view, as long as you operate on the data.

directory structure

The project directory structure is as follows:

├── android
├── build
├── images
├── intl.sh
├── ios
├── lib
├── local_json
├── pubspec.lock
├── pubspec.yaml
├── res
├── svgs
├── test
└── todo_list.iml

First of all, exceptlibOther directories:

Catalog Explain
images Used to store various pictures
local_json I encapsulate the icon information of flutter into JSON file and store it in this directory
res Store language files generated by “internationalization” plug-ins
svgs Store pictures in SVG format

And then there waslibCatalog

Write a very beautiful project of flutter todo list

Catalog Explain
config Store various configuration classes, such as DIO request encapsulation class, etc
database Store database operation related classes
i10n Class for storing international related operations
items The item class that holds part of the list list
json JSON files related to various network requests, databases, etc
logic As mentioned above, the locig layer directory
model Directory of the model layer
pages It is the directory of view layer to store each page
utils Packaged tools, such as file operation
widgets Packaged widgets


The project was founded on June 21, and it has taken more than 30 days to release version 1.0.0. Although I have done many tests and solved many bugs, the time is not enough. Mistakes are inevitable

So if you encounter any problems in the use process or have any good suggestions for the project, you are welcome to put forward them in the feedback interface of app, leave comments below, or put forward issue on GitHub.

The UI design and background interface of the project are all completed by me alone, so that’s why the time is not enough. However, at present, the project only contains two interfaces written by itself. The login function should be added to the subsequent plan, and there will be many interface operations at that time.

If you are interested, please keep watching!

If you think this app is good, or this project can help you, you may as well give this project a star. The project will continue to be updated and maintained!


App Download

  • Android download address:

Write a very beautiful project of flutter todo list

  • IOS download address:

    Currently, I haven’t purchased the IOS developer account of 99 $for one year, which may be available in the future!

Project address


Note: at present, the project running environment is the version of flitter 1.7.8 hotfix. Compared with the previous version, the modified version has more destructive fixes,
If your version of flitter is lower than the current version, some third-party libraries that your project depends on will not work. Please reduce their version at that time

The following is the third-party library to be modified in version 1.5.4

-   flutter_svg: ^0.12.4+2
-   image_crop: ^0.2.1
-   photo_view: ^0.3.3

UI design file

UI project address
Password: aczh

Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]