I have built the IOTD with Flutter. After creating a new Flutter project, I have removed the default scaffolding and made only one StatelessWidget.
How to display one image every day
Instead of downloading every image as a raw file from a single-endpoint every day, I chose to give a unique URL for every image. So that each image can be viewed at any point of time (feature not yet implemented.)
How can I give a unique URL for each image? Before that, I need to figure of where to host these images. Saving them on my server is not a good idea as they take space over time. I am using Cloudinary service to host MF7 (Craypolar) images. It gives a unique URL for each image automatically. I thought I could use the Cloudinary for the quotes too.
But what URL structure should I follow? Since, one image a day, and the dates will be unique, I need to somehow make the URL schema reflect the dates. For now, I am just getting the current date when the app is opened, and the URL is made dynamically with the date.
final formattedDate = new DateTime.now().day;
final imageUrl = 'https://cloudinary-unique-url/${formattedDate}.png';The URL problem is solved. I am making the images and renaming the files with just the number from 1-31 based on the month and uploading to Cloudinary. Everything works automatically.
Design
This is the simplified Widget tree of the app.
- Following Material design system.
- A container with padding on all sides.
- A column to hold all the elements.
- A column for the top text blocks.
- A container for the image with box-shadow decoration.
Image.network()widget with a linear progress indicator.- The icon button for sharing.
- Row for the last text.
Initial design
The final design (as of now)
Packages
These are the packages I have used for the app.
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:esys_flutter_share/esys_flutter_share.dart';