Embedded Files
Designing User Interface Using various UI elements
Designing User Interface Using various UI elements
Overview of Widgets
Overview of Widgets
Widgets are the central class hierarchy in Flutter framework. A widget is an immutable description of part of a user interface. Widgets can be inflated into elements, which manage the underlying render tree.
Stateless and Stateful Widgets
Stateless and Stateful Widgets
Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself
Stateful Widgets
Stateful Widgets
Stateful widgets are useful when the part of the user interface you are describing can change dynamically
SetState() Method to make a change
A way to set a properties on the state object and trigger updates to the UI
Starting a new flutter project using VSCode
Starting a new flutter project using VSCode
Open VSCode
Ctrl + Shift + P
Type: Flutter: New Project
Select the folder location to put your project files
Enter the name of your application
Starting a new flutter project from the terminal
Starting a new flutter project from the terminal
Open Terminal
$ Flutter create <project name>
$ cd <project name>
$ code .
Scaffold with AppBar Widgets
Scaffold with AppBar Widgets
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(home: myHome());
}
}
class myHome extends StatelessWidget {
const myHome({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tourism App'),
),
);
}
}
Text and floating Action Button Widgets
Text and floating Action Button Widgets
return Scaffold(
appBar: AppBar(
title: Text(
'Tourism App',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
),
),
centerTitle: true,
backgroundColor: Colors.green[800],
),
body: Center(
child: Text(
'Welcome to Salalah',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
letterSpacing: 2.0,
),
textAlign: TextAlign.center,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.green[400],
foregroundColor: Colors.white,
child: Icon(Icons.add_circle_sharp),
),
);
Use of Container, Image and Asset Image Widgets
Use of Container, Image and Asset Image Widgets
Before images can be displayed pubspec.yaml must be edited to enable the assets for the application. create a folder named images on your flutter project and paste your images on the folder.
Open pubspec.yaml and find assets and uncomment the assets
# To add assets to your application, add an assets section, like this:
assets:
- images/
# - images/a_dot_ham.jpeg
body: Container(
color: Colors.green[800],
margin: EdgeInsets.zero,
padding: EdgeInsets.all(20),
height: 300.0,
width: 500.0,
child: Image(
image: AssetImage('images/Salalah1.jpg'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.green[400],
foregroundColor: Colors.white,
child: Icon(Icons.add_circle_sharp),
),
Use of Column, Row and Expanded widgets
Use of Column, Row and Expanded widgets
Column Widget
Column Widget
body: Column(
children: [
Container(
color: Colors.green[800],
margin: EdgeInsets.zero,
padding: EdgeInsets.all(20),
height: 300.0,
width: 500.0,
child: Image(
image: AssetImage('images/Salalah1.jpg'),
),
),
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah2.jpg'))),
)
],
),
Column Widget displays its children in a vertical array.
Row Widget
Row Widget
Row(
children: [
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah2.jpg'))),
),
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah3.jpg'))),
),
],
)
Row widget displays its children in a horizontal array.
Expanded Widget
Expanded Widget
Row(
children: [
Expanded(
child: Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah2.jpg'))),
),
),
Expanded(
child: Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah3.jpg'))),
),
),
],
)
Source Code Available on GitHub
Page updated
Google Sites
Report abuse