Scribd
Upload
18 views19 pages

Flutter 1

This document provides an overview of creating Flutter apps and common Flutter widgets. There are two main methods for creating a Flutter project: using VSCode and the command line. Widgets are the basic building blocks in Flutter - they are immutable descriptions of UI elements. Common widgets include MaterialApp, Scaffold, Container, Column, Row, and Icon. The document demonstrates how to use these widgets to build basic app layouts and UI.

Uploaded by

202102301
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views19 pages

Flutter 1

This document provides an overview of creating Flutter apps and common Flutter widgets. There are two main methods for creating a Flutter project: using VSCode and the command line. Widgets are the basic building blocks in Flutter - they are immutable descriptions of UI elements. Common widgets include MaterialApp, Scaffold, Container, Column, Row, and Icon. The document demonstrates how to use these widgets to build basic app layouts and UI.

Uploaded by

202102301
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

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

You might also like