Flutter and Dart Training
$ flutter create ex01_statelss_widget
$ cd ex01_statelss_widget
$ flutter run
Tip
The pubspec.yaml the file is a configuration file used by the Dart package manager, pub to manage your Flutter project's dependencies and settings. It's where you define everything from the name of your project to the third-party packages you want to use in your app.
# pubspec.yaml
name: ex01_statelss_widget
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=3.2.3 <4.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
Tip
lib/main.dart: The main function by itself is the Dart entry point of an application. What makes the Flutter application take the scene is the runApp function called by passing a widget as a parameter, which will be the root widget of the application (the application itself).
# main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Stateless Widget Flutter Demo',
home: GreetingScreen(),
);
}
}
class GreetingScreen extends StatelessWidget {
const GreetingScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Welcome!'),
),
body: const Center(
child: Text(
'Instill Learning',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold ),
),
),
);
}
}
Important
State: The state is data. The state is information. Flutter uses this data to build the user interface. We all know Flutter is a declarative framework. This Means Flutter builds its User Interface to reflect the current state of the app.
Important
Stateless Widget: A stateless widget never changes. Icon , IconButton , and Text are examples of stateless widgets.
Important
Stateful Widget: A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox , Radio , Slider , InkWell , Form , and TextField are examples of stateful widgets.
Note
Useful information that users should know, even when skimming content.
[!WARNING]
[!CAUTION]