flutter hello world web app
In this post, we will look at quick code samples and related concepts for getting started with Flutter Hello World App.
I think the best way to get quickly started without getting bothered about creating Android/iOS simulator or devices is to enable Flutter web app. One can follow instructions in this page related to Flutter web app commands cheat sheet to get started with Flutter web app.
Here is the code for Flutter Hello World app. Place this code (replace with existing code created using template project) in lib/main.dart file to get started.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Hello World',
textDirection: TextDirection.ltr,
)
);
}
}
Once done, execute the project using command such as following or run from the Android IDE.
flutter run -d chrome
The following points form the most fundamental concepts to learn when getting started building Flutter Hello World app:
void main() {
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Hello World',
textDirection: TextDirection.ltr,
)
);
}
}
The above code results in the app such as the following, as displayed in the Chrome browser
The code below represents a Hello World app built with MaterialApp widget as root widget. In the above example, the app was built with Center widget as root widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Hello World'),
),
body: Center(
child: Text(
'Hello World!',
textDirection: TextDirection.ltr,
)
),
)
);
}
}
Here are the key concepts to note:
Here is how the app looks like:
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…