Material Scaffold Widget Tutorial
Implements the basic material design visual layout structure.
Material Scaffold Widget useful Inputs
-
body: The primary content of the scaffold.
-
appBar: An app bar to display at the top of the scaffold.
-
drawer: A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right or right-to-left
-
primary: Whether this scaffold is being displayed at the top of the screen.
-
bottomNavigationBar: A bottom navigation bar to display at the bottom of the scaffold
-
backgroundColor: The color of the Material widget that underlies the entire Scaffold.
-
floatingActionButtonLocation: Responsible for determining where the floatingActionButton should go.
-
floatingActionButton: A button displayed floating above body, in the bottom right corner.
Material Scaffold Widget example
Scaffold(
appBar: AppBar(title: Text("Bismillah App"),),
body: Center(
child: Text("Bismillah App Body"),
),
)Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
primary: true,
drawer: WidgetHelper.getDrawer(context),
bottomNavigationBar: WidgetHelper.getBottomAppBar(),
backgroundColor: Colors.blueGrey.shade200,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: Text('Bismillah App'),
floatingActionButton: WidgetHelper.getFloatingActionButton(),
)Full codes
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => (runApp(ScaffoldExample()));
class ScaffoldExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
primary: true,
drawer: WidgetHelper.getDrawer(context),
bottomNavigationBar: WidgetHelper.getBottomAppBar(),
backgroundColor: Colors.blueGrey.shade200,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: Text('Bismillah App'),
floatingActionButton: WidgetHelper.getFloatingActionButton(),
),
);
}
}
class WidgetHelper {
static getBottomAppBar(){
return BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(height: 50.0),
);
}
static getFloatingActionButton(){
return FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
);
}
static getDrawer(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: Text('Item 1'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
],
),
);
}
}