As a web developer, you’re probably familiar with HTML and CSS—two of the most essential building blocks of web development. They give you full control over the layout and styling of your webpage elements. But what if you wanted to venture beyond the web and develop cross-platform mobile apps? Enter Flutter—a powerful framework that allows you to create natively compiled applications for mobile, web, and desktop with a single codebase, using Dart as the programming language.
For those of us who have built web apps using HTML and CSS, transitioning into Flutter might seem a little tricky at first. While both HTML/CSS and Flutter's Dart-based framework serve similar functions in terms of building UIs, they have their own distinctive approaches. So how can you go from building a responsive webpage with HTML and CSS to a dynamic mobile app with Flutter?
In this blog post, we will take a deep dive into the core differences and similarities between HTML/CSS and Flutter, helping you master layouts and widgets in Flutter, and gain a solid understanding of how to seamlessly transition from web development to mobile development.
1. Introduction to Flutter for Web Developers
Flutter is a cross-platform UI toolkit built by Google that allows developers to build applications for iOS, Android, Web, and even desktop platforms—all with a single codebase. Unlike traditional frameworks that rely on a native UI for each platform, Flutter uses its own rendering engine to draw UIs consistently across platforms.
If you're coming from a web development background, you'll find some elements of Flutter familiar, and others will take a bit of getting used to. Here’s a quick overview of the key differences between the web and Flutter development:
- HTML/CSS vs Flutter Widgets: In web development, you use HTML tags (e.g.,
<div>,<span>, etc.) to structure content and CSS to style it. In Flutter, everything is a widget, and the UI is built entirely from a hierarchy of widgets. - Dart vs JavaScript: Flutter is written in Dart, a language developed by Google that compiles to native code, unlike JavaScript which is used in web development.
2. How HTML and CSS Layouts Map to Flutter Widgets
Understanding how Flutter layouts work compared to traditional HTML/CSS layouts is key to mastering Flutter development. Both approaches have the concept of containers and layout properties, but their implementation differs significantly.
Let’s start by looking at some examples of common layout tasks in both HTML/CSS and Flutter. We will compare the code side-by-side to help you better grasp the similarities and differences.
Example 1: Styling and Aligning Text
In HTML/CSS, styling text is simple—just use the font and color properties:
HTML/CSS Code:
<div class="grey-box">
Lorem ipsum
</div>
<style>
.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
</style>
Here, we create a simple <div> container with a background color and styled text.
Now, let’s see how this translates in Flutter:
Flutter Code:
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: const Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Georgia',
fontSize: 24,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
);
Here, we create a Container widget with a specified width, height, and background color, then add a Text widget inside it with the desired style.
Notice that in Flutter, you’re working with a widget-based approach. Instead of using HTML tags, you use widgets like Container, Text, Column, Row, etc., to define and structure your UI elements.
Example 2: Centering Components
In HTML/CSS, you can use flexbox to center elements:
HTML/CSS Code:
<div class="grey-box">
Lorem ipsum
</div>
<style>
.grey-box {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
With Flutter, centering is just as easy. You wrap the child widget in a Center widget:
Flutter Code:
final container = Container(
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
);
Here, the Center widget automatically centers its child widget, both horizontally and vertically. Flutter’s layout system is very flexible and declarative, which is one of its biggest advantages.
Example 3: Setting Background Color
In CSS, the background color is set using the background-color property:
HTML/CSS Code:
<div class="grey-box">
Lorem ipsum
</div>
<style>
.grey-box {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
}
</style>
In Flutter, the background color is set using the color property in a Container widget:
Flutter Code:
final container = Container(
width: 320,
height: 240,
color: Colors.grey[300],
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
);
Alternatively, if you want to use more complex decorations like gradients, you can use the decoration property in Flutter:
final container = Container(
width: 320,
height: 240,
decoration: BoxDecoration(
color: Colors.grey[300],
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
);
As you can see, the implementation in Flutter is quite straightforward and offers flexibility when it comes to styling your widgets.
Example 4: Manipulating Position and Size
Positioning elements in HTML/CSS is done using absolute positioning and the position property:
HTML/CSS Code:
<div class="grey-box">
<div class="red-box">
Lorem ipsum
</div>
</div>
<style>
.grey-box {
position: relative;
background-color: #e0e0e0;
width: 320px;
height: 240px;
}
.red-box {
position: absolute;
top: 24px;
left: 24px;
background-color: #ef5350;
padding: 16px;
color: #ffffff;
}
</style>
In Flutter, you use the Stack widget to position elements absolutely:
Flutter Code:
final container = Container(
width: 320,
height: 240,
color: Colors.grey[300],
child: Stack(
children: [
Positioned(
left: 24,
top: 24,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
],
),
);
The Stack widget in Flutter allows for layered positioning, and the Positioned widget allows you to define the absolute position of an element relative to its parent.
3. Key Differences Between HTML/CSS and Flutter
Now that we’ve covered some fundamental examples, let’s take a look at the key differences between web development with HTML/CSS and mobile app development with Flutter.
1. Declarative UI in Flutter vs Imperative UI in HTML/CSS
- HTML/CSS: The styling is often done imperatively, meaning you define the styles for each element.
- Flutter: Flutter uses a declarative approach. You build the UI by describing what you want rather than how to do it. Flutter’s widgets handle rendering and positioning efficiently based on the widget tree.
2. Layout Widgets
- HTML/CSS: You have
div,span,section, etc., and use CSS for layout control. - Flutter: Flutter relies on widgets to define the UI. These include layout widgets like
Container,Column,Row,Stack, and more. These widgets provide a flexible and powerful way to manage complex layouts.
3. Styling Mechanisms
- HTML/CSS: Styling is done using CSS properties like
font-family,font-size,background-color, etc. - Flutter: Styling is done using TextStyle, BoxDecoration, and EdgeInsets, which allow more flexibility in how you style the UI.
4. Positioning
- HTML/CSS: You can use
position,margin,padding, and CSS Grid or Flexbox for advanced layouts. - Flutter: You use Widgets like
Positioned(for absolute positioning) andStackfor complex positioning, along with Padding and Margin for spacing.
4. Conclusion
The transition from HTML/CSS to Flutter might seem daunting at first, but with the right mindset and understanding, you’ll quickly adapt to the widget-based approach of Flutter development. By drawing comparisons between HTML and Flutter, you can leverage your existing web development knowledge to create powerful, beautiful mobile apps.
With a declarative UI, rich set of widgets, and powerful layout mechanisms, Flutter has all the tools you need to build stunning, responsive applications. Whether you’re building for mobile or web, Flutter offers a consistent development experience across platforms.
By mastering Flutter widgets and understanding how they correspond to your familiar web development concepts, you’ll be ready to dive into the world of cross-platform mobile app development in no time!
Author/Developer
Israel Joshua Chukwubueze
(Formerly known as Okade Christopher Ekene)
Comments powered by CComment