0 - Introduction

Hi, I am Mangirdas, a software engineer and Flutter enthusiast from Lithuania. I have been following the Flutter journey since its version of 0.10.2 but realized that I have not contributed to the Flutter community, yet. So I am more than intrigued to introduce a new article series — Flutter Design Patterns. In the series, I will do my best to describe OOP design patterns, their implementation in Dart programming language and appliance when developing applications using Flutter.

Table of Contents

• About the series
• OOP, Design Patterns…???
• Application overview
• Summary
• Your contribution

About the series

In each article of the series, I will overview a design pattern, implement it using Dart programming language, prepare a practical (if possible) example in Flutter and add it to the Flutter Design Patterns mobile application. The theoretical part about design patterns would be heavily based on the “Gang of Four” (GoF) book “Design Patterns: Elements of Reusable Object-Oriented Software”, which, in my opinion, is one of the most iconic software engineering books about software design patterns. This book contains more than 20 different OOP design patterns, so you can expect more than 20 articles in the series! I will do my best to be consistent and publish a new article to the series weekly.

OOP, Design Patterns…???

Hmm, ok, maybe I have jumped straight to the point but did not explain what is this series about…

What is OOP?

OOP stands for “Object-Oriented Programming”. In simple words, it is a programming paradigm which uses the idea of objects to represent data and methods to manipulate that data. This idea lets software engineers write code which represents the real-world objects, the data they contain and their relations with other objects via corresponding code structures. If you have already written some code using Dart or any other OOP programming language (C#, C++, Java just to name a few), probably you saw and used classes, defined properties and/or methods inside of those classes, created class instances and operated with them, specified relations between different objects/classes — that’s nothing less than Object-Oriented programming!

What is OOP Design Pattern?

OOP design pattern is a typical solution to a common problem in software design. In the GoF book, the purpose of a design pattern is described like this:

A design pattern names, abstracts, and identifies the key aspects of a common design structure that make it useful for creating a reusable object-oriented design.

A software design pattern is not about solving specific UI/UX problems (as it could look from the first sight by noticing the word design), it is more about the code structure which is like a blueprint to solve a particular object-oriented design problem, issue in your code. By applying these patterns, you can speed up the development process, write code which is more flexible, reusable. However, the most difficult part of these patterns is to understand the main idea behind them, to identify places in your code where these patterns could be applied and which problems could be resolved. But that’s what this series is all about — to introduce and provide the basics of several design patterns to help you choose the right one for your specific problem.

Application overview

As I have already mentioned, by introducing a new design pattern per article, I will also build a Flutter Design Patterns mobile application and expand its design patterns library step-by-step. Of course, this application is open-source and its code is already available on Github for all of you! The application consists only of three different screens — the main menu, design patterns’ category screen and design pattern’s screen.

I hope you have noticed a little heartbeat animation in the main menu, as well as page transitions and content animations, which provide some dynamic to the application (I have spent a few hours to implement them, so, please, notice me senpai).

To demonstrate how the application displays design patterns, I have created a new branch in the repository. I will not merge it to the master branch later (it is only for demonstration purposes), but by using these changes I will explain how a new design pattern could be (and will be!) added to the application.

First of all, a new data object should be added to the assets/data/design_patterns.json containing information about the design pattern (id, title, description and route):

...
{
  "id": "introduction",
  "title": "Introduction",
  "description": "Laborum qui ea velit sint officia culpa aute ad sint fugiat excepteur ex pariatur consectetur.",
  "route": "/introduction"
}
...

Then a markdown file must be added to the assets/markdown folder with the same name as the previously set id in design pattern’s JSON. This markdown would contain information about the design pattern — usually, code snippets with some explanation on how the pattern is implemented. After providing a markdown file, the design pattern should be implemented and its example widget for the design pattern’s screen should be prepared. For this example, I have created a simple Hello World widget (introduction.dart):

Finally, a new route should be added to router.dart file by adding the route name to the DesignPatternRoutes class (it should match with the route value in design pattern’s JSON file) and adding a new DesignPatternDetails widget with a previously created example (lines 25–32):

That’s all! After these steps, a new design pattern is available in the Flutter Design Patterns library:

If I have missed something, do not hesitate to ask or just check the code by yourself, it is open and free for use!

Summary

I hope this article encouraged you to learn more about OOP, design patterns or programming in general. New articles are on their way so stay tuned and happy coding!

Your contribution

💖 or 🦄 this article to show your support and motivate me to write better!
💬 Leave a response to this article by providing your insights, comments or wishes for the next topic.
📢 Share this article with your friends, colleagues in social media.
➕ Follow me on dev.to or any other social media platform.
⭐ Star the Github repository.