From Web Dev to Flutter: Key Concepts and Best Practices from a Real Project

Upon learning the basics of Flutter, before starting to build the project independently, I wanted to follow a tutorial where I could learn the architecture/best practices used in Flutter. Hence, I followed Flutter Basics by a REAL Project to familiarize myself more with Flutter. The blog is my reflection on the tutorial. Following are the things that I learned, how to use in Flutter, from this tutorial.

Note: This blog is intended for readers who have a background in web development and programming. Beginners to programming may find some of the comparisons and terminologies advanced.

1. SizedBox

A SizedBox is an invisible box that you can add to the project to control the size of other widgets or add space within the widgets. It is commonly used to add space between widgets, like padding or a gap, but in a more flexible and readable way. It is similar to adding a margin to add space between two components using CSS.

Let’s say you have two buttons, and you want a bit of space between them. You could use a SizedBox like this:

Column(
  children: [
    ElevatedButton(onPressed: () {}, child: Text('Button 1')),
    SizedBox(height: 20), // This adds space between the buttons
    ElevatedButton(onPressed: () {}, child: Text('Button 2')),
  ],
)

2. Columns, Rows and Axis Alignments

Columns

A Column helps arrange the widgets in a vertical stack which is similar to how you stack HTML elements one on the top of another using a div. When you use a Column, you’re telling Flutter to arrange its children widgets in a vertical list, from top to bottom. Here’s a simple example of a Column:

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Rows

A Row helps arrange the widgets in a horizontal stack. When you use a Row, you’re telling Flutter to arrange its children widgets in a horizontal line, from left to right. Here’s a simple example of a Row:

Row(
  children: [
    Icon(Icons.star),
    Text('Item 1'),
    Text('Item 2'),
  ],
)

This code creates a horizontal row with an icon followed by two text items. Each widget is placed next to the other, just like inline elements in HTML (like span).

Alignment and Space

Further, flutter provides a way for you to control the alignment and space within the items in a Row or Column. Both Row and Column provide two alignment properties: Main Axis and Cross Axis.

Main Axis: This is the primary direction in which a Row or Column arranges its children (horizontal for row and vertical for column). mainAxisAlignment controls how the widgets are spaced along the main axis. It can be assigned values such as start, end, center, space between, space around, and space evenly.

Cross Axis: This is the perpendicular direction to the main axis of the Row or Column (vertical for row and horizontal for column). crossAxisAlignment controls how the widgets are spaced along the cross axis. It can be assigned values such as start, end, center, stretch, and baseline.

Imagine a Row with three buttons:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // Distributes buttons evenly with space in between
  crossAxisAlignment: CrossAxisAlignment.center,     // Aligns buttons to the center vertically
  children: [
    ElevatedButton(onPressed: () {}, child: Text('Button 1')),
    ElevatedButton(onPressed: () {}, child: Text('Button 2')),
    ElevatedButton(onPressed: () {}, child: Text('Button 3')),
  ],
)

Flutter makes using alignment and spacing properties highly efficient compared to writing a lot of CSS properties in web development.

3. Margins and Paddings

As the name suggests, margin and padding are the same as in web development. Following is an example of how to use it,

Container(
  padding: EdgeInsets.all(16.0), // Adds 16 pixels of padding on all sides
  child: Text('Hello World'),
)

Container(
  padding: EdgeInsets.only(left: 16.0), // Adds 16 pixels of padding on left side
  child: Text('Hello World'),
)

Container(
  margin: EdgeInsets.all(16.0), // Adds 16 pixels of margin on all sides
  child: Text('Hello World'),
)

Container(
  margin: EdgeInsets.only(left: 16.0), // Adds 16 pixels of margin on left side
  child: Text('Hello World'),
)

4. List View

In Flutter, the ListView provides the functionality of a scrollable list of widgets arranged either vertically or horizontally. It can be compared with the HTML ul or ol element combined with the CSS overflow-y: scroll to create a scrollable list on the webpage. However, ListView in Flutter is more powerful and flexible, providing easy ways to handle large amounts of data with minimal code. It automatically handles the creation and disposal of list items as they scroll into and out of view, making it efficient even with a large number of items. There are various forms of ListView like builder and separated which help display an array of objects efficiently and all forms have their benefits.

// Considering an array of fruit objects.

ListView.separated(
  itemCount: = fruits.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(fruits[index].name));
  },
  separatorBuilder: (context, index) => SizedBox(width: 20),
)
// .separated provides the functionality to add a separator between items.

5. Conditional Rendering and Styling

In Flutter, you achieve conditional styling by using conditional expressions (if, else, ternary operators) or switch statements directly in your widget's style properties.

bool isActive = true;

Container(
  color: isActive ? Colors.green : Colors.red, // Conditional color
  child: Text('Status: ${isActive ? 'Active' : 'Inactive'}'),
)

6. SingleChildScrollView

When you add more content on the screen than its size, it is known as overflow content. In web development, handling overflow content and scrolling is generally more straightforward because it's managed automatically by the browser's rendering engine. However, in Flutter, when there is a overflow content, you use SingleChildScrollView to explicitly create a scrollable area for a single child widget. By default, SingleChildScrollView provides vertical scrolling. You need to specify the scroll direction if horizontal scrolling is desired. Following is the code which uses SingleChildScrollView.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: <Widget>[
      // Your wide content here
    ],
  ),
)

Personal Additions

Apart from following the tutorial to complete the project, the following are some of the personal additions that I made to the project.

1. Clean Architecture

Following is the architecture that the tutorial had.

.
├── assets/
│   ├── icons/
├── lib/
│   ├── models/
│   │    ├── category_model.dart
│   │    ├── diet_model.dart
│   │    └── popular_model.dart
│   ├── pages/
│   │    └── home.dart
│   └── main.dart
└── ...

Following is the architecture that I used to make sure the code is cleaned.

.
├── assets/
│   ├── icons/
├── lib/
│   ├── models/
│   │    ├── category_model.dart
│   │    ├── diet_model.dart
│   │    └── popular_model.dart
│   ├── pages/
│   │    └── home
│   │         ├── components/
│   │         │   ├── app_bar.dart
│   │         │   ├── category.dart
│   │         │   ├── popular.dart
│   │         │   ├── recommendation.dart
│   │         │   └── search_field.dart
│   │         └── home.dart
│   └── main.dart
└── ...

Citation
I would like to acknowledge that I took help from ChatGPT to structure my blog, simplify content, and generate sample code examples.