The Scaffold widget in Flutter is a fundamental building block for implementing Material Design layouts in your app. It provides a basic structure that includes an app bar, body content, floating action buttons, drawers, and more. Here’s an example of using Scaffold in Flutter
In this example, we create customize Scaffold by adding additional widgets like a Drawer for navigation etc. The Scaffold serves as a container for organizing and structuring the different elements of your app’s UI within the Material Design guidelines.
Make sure to import the necessary Flutter packages and run the app using runApp() with the root MyApp widget as the entry point.
import 'package:flutter/material.dart';
class CustomScaffold extends StatelessWidget {
final String title;
final Widget body;
final Widget? floatingActionButton;
final Widget? appBarLeading;
final List<Widget>? appBarActions;
CustomScaffold({
required this.title,
required this.body,
this.floatingActionButton,
this.appBarLeading,
this.appBarActions,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
leading: appBarLeading,
actions: appBarActions,
),
body: body,
floatingActionButton: floatingActionButton,
);
}
}
You can use below customScaffold in all Mobile app screens
CustomScaffold(
title: 'My Custom Scaffold',
body: Container(
// Your main content goes here
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Handle floating action button press
},
child: Icon(Icons.add),
),
appBarLeading: IconButton(
onPressed: () {
// Handle app bar leading element press
},
icon: Icon(Icons.menu),
),
appBarActions: [
IconButton(
onPressed: () {
// Handle app bar action 1 press
},
icon: Icon(Icons.search),
),
IconButton(
onPressed: () {
// Handle app bar action 2 press
},
icon: Icon(Icons.settings),
),
],
)
Now, you can use CustomScaffold widget according to your specific requirements. You can add additional properties or customize the appearance further by modifying the appBar, body, or by adding additional widgets inside the CustomScaffold widget.
Full Code is here:-
import 'package:flutter/material.dart';
import 'package:rttutorials/custom_app_bar.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ResearchThinker',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MySharedPrefExample(),
);
}
}
class MySharedPrefExample extends StatefulWidget {
const MySharedPrefExample({Key? key}) : super(key: key);
@override
State<MySharedPrefExample> createState() => _MySharedPrefExampleState();
}
class _MySharedPrefExampleState extends State<MySharedPrefExample> {
TextEditingController controller = TextEditingController();
var newValue = '';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CustomScaffold(
title: 'ResearchThinker Custom Scaffold',
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
TextFormField(
controller: controller,
decoration: InputDecoration(
hintText: 'Store data',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
const SizedBox(
height: 5,
),
const SizedBox(
height: 10,
),
ElevatedButton(
child: const Text(
"Save in SharedPref",
),
onPressed: () async {
if (controller.text != null) {
storeDataInSharedPref(controller.text);
}
},
),
const SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () async {
fetchSharedPrefData('key1')?.then((value) {
setState(() {
newValue = value.toString();
});
});
// print("newValue $newValue");
},
child: const Text('Show Stored daata')),
SizedBox(
height: 5,
),
Text(
newValue.toString(),
style: TextStyle(color: Colors.blueAccent),
)
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Handle floating action button press
},
child: Icon(Icons.add),
),
appBarLeading: IconButton(
onPressed: () {
// Handle app bar leading element press
},
icon: Icon(Icons.menu),
),
appBarActions: [
IconButton(
onPressed: () {
// Handle app bar action 1 press
},
icon: Icon(Icons.search),
),
IconButton(
onPressed: () {
// Handle app bar action 2 press
},
icon: Icon(Icons.settings),
),
],
),
);
}
storeDataInSharedPref(data) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
//Note here we use key1 as a unique key which store data in sharedPreferences
await prefs.setString('key1', data); //
}
Future<String?>? fetchSharedPrefData(key) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
//Note here we use pass key
var value = await prefs.getString(key); //
// print("value $value");
return value;
}
}
// create another dart file for below code, like (custom_app_bar.dart)
import 'package:flutter/material.dart';
class CustomScaffold extends StatelessWidget {
final String title;
final Widget body;
final Widget? floatingActionButton;
final Widget? appBarLeading;
final List<Widget>? appBarActions;
CustomScaffold({
required this.title,
required this.body,
this.floatingActionButton,
this.appBarLeading,
this.appBarActions,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
leading: appBarLeading,
actions: appBarActions,
),
body: body,
floatingActionButton: floatingActionButton,
);
}
}
