View video tutorial
FLUTTER Scaffold widget
FLUTTER
This tutorial will show how to use scaffold widget in Flutter.
Example
Scaffold widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: const Color.fromARGB(200, 150, 150, 150)),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
'First Flutter Application',
),
),
),
);
}
}
Output should look like this.
Example
Scaffold widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark()
.copyWith(scaffoldBackgroundColor: Color.fromARGB(199, 105, 96, 96)),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
'First Flutter Application',
),
),
body: const Center(
child: Text("Body Text"),
),
),
);
}
}
Output should look like this.
Example
Scaffold widget
import 'dart:html';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//theme: ,
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Appbar title"),
),
body: Center(
child: const Text("Body Text Here"),
),
);
}
}
Output should look like this.
Example
Scaffold widget
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Color.fromARGB(149, 192, 186, 186)),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
'First Flutter Application',
),
),
body: const Center(
//child: Text("Body Text", style: TextStyle(color: Color.fromARGB(200,255,10,10)),),
//child: Text("Body Text", style: TextStyle(color: Colors.red),),
child: Text(
"Body Text",
style: TextStyle(
//color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
color: Colors.grey),
),
),
),
);
}
}
Output should look like this.
Example
Scaffold widget
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Color.fromARGB(149, 192, 186, 186)),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
'First Flutter Application',
),
),
body: const Center(
//child: Text("Body Text", style: TextStyle(color: Color.fromARGB(200,255,10,10)),),
//child: Text("Body Text", style: TextStyle(color: Colors.red),),
child: Text(
"Body Text",
style: TextStyle(
//color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
color: Colors.grey),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print("Button Clicked");
},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
backgroundColor: Colors.amber[400],
),
);
}
}
Output should look like this.
Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.
For documentation: visit dart documentation. visit flutter documentation.
Try Dart and Flutter Here or Here