Flutter-Session1
Basic Flutter
Lamis Khaled Fouad
[email protected]
How to create a Flutter app
Method 1:
1. Open Vscode
2. Ctrl + shift +P
3. Choose Flutter : New Project
4. Choose Application
5. Choose your folder to create your project
6. Name your new flutter app
Ctrl+Shift+P :
Choose Application :
Name your new flutter app:
How to create a Flutter app
Method 2:
1. Open the folder you want to create your project into
2. In the path section write cmd
3. Write in the cmd [ flutter create project_name ]
Write in the cmd [ flutter create project_name ]:
What is Widgets ?
Widgets are the central class hierarchy in the Flutter
framework. A widget is an immutable description of part
of a user interface.
MaterialApp Widgets
First widgets in your applications
A convenience widget that wraps a number of widgets
that are commonly required for Material Design
applications.
import 'package:flutter/material.dart';
// Do some awesome stuff
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
);
}
}
Importent wodgets to know:
• Scaffold
• Center
• Container
• Column
• Row
• CircleAvatar
• Image
• Icon
• Divider
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Center(child: Text("Hello world"),),
),
);
}
}
Container Widget
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Container(
height: 150,
width: 150,
child: Text("Hello World"),
color: Colors.brown,
),
),
);
}
Column widget
is one of Flutter application's most
commonly used layout patterns. It is a
multi-child widget that displays its
children in a vertical array. This widget is
widely used to create user interfaces
with multiple components organized in
a vertical arrangement. Its main-axis
alignment is vertical, as shown in the
below image:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.red,
height: 100,
width: 100,
child: Center(child: Text('Widget 1', style: TextStyle(color: Colors.white))),
),
Container(
color: Colors.green,
height: 100,
width: 100,
child: Center(child: Text('Widget 2', style: TextStyle(color: Colors.white))),
),
Container(
color: Colors.blue,
height: 100,
width: 100,
child: Center(child: Text('Widget 3', style: TextStyle(color: Colors.white))),
),
],
),
Row Widget
is a commonly used layout pattern in
Flutter applications. It is a multi-child
widget that displays its children in a
horizontal array. Its main-axis
alignment is horizontal, as shown in
the image below..
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.red,
height: 100,
width: 100,
child: Center(child: Text('Widget 1', style: TextStyle(color: Colors.white))),
),
Container(
color: Colors.green,
height: 100,
width: 100,
child: Center(child: Text('Widget 2', style: TextStyle(color: Colors.white))),
),
Container(
color: Colors.blue,
height: 100,
width: 100,
child: Center(child: Text('Widget 3', style: TextStyle(color: Colors.white))),
),
],
),
Your Task
-Tip: Use Widget SizedBox()
for space ,
-Look for Widget Icon()
Thank You
