Flutter

Presented to:
Ma’am Fatima Shehzadi
Presented by:
Nimra Khalid(2021-CS-501)
Momina Saeed(2021-CS-504)
 Agenda
.

Cuppertino page and widgets. Dialog Multiple OS

2 4 6
1 3 5
Material Scaffold Single OS
Widgets
 Dialogs
 The dialog is a type of widget which comes on the
window or the screen which contains any critical
information or can ask for any decision.
 We use a dialog box for a different type of condition
such as an alert notification, or simple notification in
which different options are shown, or we can also make
a dialog box that can be used as a tab for showing the
dialog box.
 This type of dialog displays a message
01 –ALERT DIALOG with optional title and actions. It's
commonly used to present alerts or
confirmations to the user.

This type of dialog displays a list of

02 – SIMPLE DIALOG options to the user. It's useful for
presenting a set of choices or actions.

This type of dialog slides up from the

03 –BOTTOM SHEET bottom of the screen and typically
provides additional actions or settings.
It's commonly used for tasks like
selecting a date or filtering content.
 code

import 'package:flutter/material.dart'; body: Center(

child: RaisedButton(
void main() { onPressed: () {
runApp(MyApp()); showDialog(
} context: context,
builder: (BuildContext
class MyApp extends StatelessWidget context) {
{ return AlertDialog(
@override title: Text('Alert'),
Widget build(BuildContext context) content: Text('This is a
{ simple alert dialog.'),
return MaterialApp( actions: <Widget>[
home: Scaffold( FlatButton(
appBar: AppBar( onPressed: () {
title: Text('AlertDialog
Example'),
),
 code

Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
},
child: Text('Show AlertDialog'),
),
),
),
);
}
}
 Single OS
 In Flutter, a "single OS" typically refers to developing an
application specifically for one operating system, such as
Android or iOS..
 If you intend to develop an application only for a single
operating system, you can still use Flutter for that purpose. You
would develop and optimize your app specifically for that
platform, utilizing the features and design patterns native to
that OS.
 Multiple OS
In Flutter, you can build applications that target multiple
operating systems (OS) from a single codebase. Flutter
provides a framework for cross-platform development,
allowing you to create apps for Android, iOS, web,
desktop (Windows, macOS, Linux),
. and even embedded
devices.
 Multiple OS
Here's how you can target multiple operating systems with
Flutter:
 Android: Flutter supports Android development, allowing
you to build apps for smartphones, tablets, and other Android-
powered devices. You can use Flutter's Material Design
widgets to create native-looking
. Android apps.
 iOS: Flutter also supports iOS development, enabling you to
build apps for iPhones, iPads, and other Apple devices.
 Multiple OS
Web: Flutter has experimental support for web
development, allowing you to compile your Flutter code
to run on modern web browsers. You can create
responsive web applications with Flutter, sharing code
between your web and mobile apps.
 Desktop: Flutter extends its. support to desktop
platforms such as Windows, macOS, and Linux. You
can build native desktop applications using Flutter,
leveraging the same codebase and UI elements as your
mobile and web apps.
 Cupertino Page

Cupertino widgets

Scaffold
 Material Widgets
Material widgets are a set of pre-designed UI components
following the Material Design guidelines. These widgets provide
a consistent look and feel across different platforms and screen
sizes. They include buttons, text fields, cards, and various other
elements commonly used in modern app design. Material widgets
are typically used in Android apps, but they can also be used in
iOS apps with some customization
 Cupertino Page
In Flutter, Cupertino is the design language for iOS applications. A
Cupertino Page refers to the primary visual container for content in an
iOS app. It typically represents a full screen or a major portion of the
screen where app content is displayed. Cupertino Pages often contain
other Cupertino widgets like navigation bars, text fields, buttons, and
more, all styled according to the iOS design guidelines.
 Cupertino Widgets
Cupertino widgets are a set of UI components specifically
designed to mimic the native iOS look and feel. They
include buttons, navigation bars, pickers, sliders, and other
elements styled according to Apple's Human Interface
Guidelines (HIG). These widgets allow Flutter developers
to create iOS apps that closely resemble native iOS apps in
terms of appearance and behavior.
 Scaffold
Scaffold is a fundamental layout structure in Flutter that provides a
framework for building app screens. It serves as a template for the
overall layout of the app, including the app bar, navigation drawer,
floating action button (FAB), and bottom navigation bar. Scaffold
simplifies the process of creating common app layouts and handles
navigation and app-wide elements efficiently.
 code output

Widget buildCupertinoPageScaffold() {
return
CupertinoPageScaffold( navigationBa
r: CupertinoNavigationBar( middle:
Text('Cupertino Page'), ), child:
Center( child: CupertinoButton(
child: Text('Press me'), onPressed:
() {}, ), ), ); } Widget
buildMaterialScaffold() { return
Scaffold( appBar: AppBar( title:
Text('Material Page'), ), body:
Center( child:
ElevatedButton( child: Text('Press
me'), onPressed: ()
{}, ), ), ); }}
 code output

import
'package:flutter/cupertino.dart';import
'package:flutter/material.dart';void
main() { runApp(MyApp());}class
MyApp extends StatelessWidget
{ @override Widget build(BuildContext
context) { return MaterialApp( title:
'Flutter Material Widgets Example',
home: MyHomePage(), ); }}
class MyHomePage extends
StatelessWidget { @override Widget
build(BuildContext context) { return
Platform.isIOS ?
buildCupertinoPageScaffold() :
buildMaterialScaffold(); }
Cupertino page output

import
'package:flutter/cupertino.dart';import
'package:flutter/material.dart';void
main() { runApp(MyApp());}class
MyApp extends StatelessWidget
{ @override Widget build(BuildContext
context) { return
CupertinoApp( title: 'Cupertino Page
Example', home:
CupertinoPage(), ); }}class
CupertinoPage extends StatelessWidget {
@override Widget build(BuildContext
context) { return
CupertinoPageScaffold( navigationBa
r: CupertinoNavigationBar( middle:
Text('Cupertino Page'), ),
Cupertino page output
child: Center( child:
Column( mainAxisAlignment:
MainAxisAlignment.center,
children:
<Widget>[ CupertinoButton.filled
( onPressed: () { //
Handle button tap },
child: Text('Cupertino Button'), ),
SizedBox(height: 20),
CupertinoTextField( placeholder:
'Enter Text', onChanged: (value)
{ // Handle text field changes
}, ), SizedBox(height:
20),
CupertinoSwitch( value: true,
onChanged: (value) { //
Handle switch changes }, ),
], ), ), ); }}
Cupertino widgets output

import
'package:flutter/cupertino.dart';import
'package:flutter/material.dart';void
main() { runApp(MyApp());}class
MyApp extends StatelessWidget
{ @override Widget build(BuildContext
context) { return
CupertinoApp( title: 'Cupertino
Widgets Example', home:
CupertinoWidgetDemo(), ); }}class
CupertinoWidgetDemo extends
StatelessWidget { @override Widget
build(BuildContext context) { return
CupertinoPageScaffold( navigationBa
r: CupertinoNavigationBar( middle:
Text('Cupertino Widgets Example'), ),
child: Center( child: Column(
Cupertino widgets output
imainAxisAlignment:
MainAxisAlignment.center,
children:
<Widget>[ CupertinoButton(
onPressed: () { // Handle
button tap }, child:
Text('Cupertino Button'), ),
SizedBox(height: 20),
CupertinoTextField( placeholder:
'Enter text', onChanged: (text) {
// Handle text changes },
), SizedBox(height: 20),
CupertinoSwitch( value: false,
onChanged: (value) { //
Handle switch changes }, ),
SizedBox(height: 20),
CupertinoActivityIndicator(), ],
), ), ); }}
THANK YOU