Hello freinds In this article we are creating a setting page screen in Flutter UI Design with source code 2022 – Setting Page Flutter UI Design with source code
Configure flutter in your system first
Note: Before creating flutter project you need to configure Flutter in your system successfully . here i have given another articale to help in configuration of flutter in your system
Setting page output demo
App bar
appBar: AppBar(
title: Text('Settings'),
backgroundColor: colorSecondry,
leading: IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => BottomNav()),
);
},
icon: Icon(Icons.arrow_back_outlined, color: colorPrimary),
),
automaticallyImplyLeading: false,
centerTitle: true,
elevation: 10,
),Body section Code
body: Padding(
padding: EdgeInsets.only(left: 2.0.h, right: 2.0.h, top: 3.0.h),
child: SingleChildScrollView(
child: Column(children: <Widget>[
Row(
children: [
GestureDetector(
onTap: () {}, // Image tapped
child: CircleAvatar(
backgroundColor: colorPrimary,
radius: 4.h,
backgroundImage: AssetImage(
'assets/images/profile.png',
),
),
),
SizedBox(
width: 2.h,
),
Center(
child: Text(
"Mr. John Khare",
style: Style_File.title.copyWith(color: colorWhite),
)),
Spacer(),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.edit,
size: 18,
color: colorWhite,
)),
],
),
SizedBox(
height: 5.h,
),
Divider(
color: colorGrey,
thickness: 0.1.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Language",
style: Style_File.title.copyWith(color: colorWhite),
)),
Spacer(),
Text(
"English",
style: Style_File.title.copyWith(color: colorGrey),
),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Notification",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"About",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Terms & Conditions",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Privacy Policy",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
const SizedBox(
height: 40,
),
Center(
child: ButtonWidget(
text: 'Logout',
onTap: () {},
),
),
])),
),Divider Here
Divider(
color: colorGrey,
thickness: 0.07.h,
),Icon Button
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),setting.dart
Complete Source Code
import 'package:ancientmysticmusic/screen/home/bottomnav.dart';
import 'package:ancientmysticmusic/utils/button_widget.dart';
import 'package:ancientmysticmusic/utils/colors.dart';
import 'package:ancientmysticmusic/utils/style_file.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:responsive_sizer/responsive_sizer.dart';
class SettingScreen extends StatefulWidget {
const SettingScreen({super.key});
@override
State<SettingScreen> createState() => _SettingScreenState();
}
class _SettingScreenState extends State<SettingScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: colorSecondry,
appBar: AppBar(
title: Text('Settings'),
backgroundColor: colorSecondry,
leading: IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => BottomNav()),
);
},
icon: Icon(Icons.arrow_back_outlined, color: colorPrimary),
),
automaticallyImplyLeading: false,
centerTitle: true,
elevation: 10,
),
body: Padding(
padding: EdgeInsets.only(left: 2.0.h, right: 2.0.h, top: 3.0.h),
child: SingleChildScrollView(
child: Column(children: <Widget>[
Row(
children: [
GestureDetector(
onTap: () {}, // Image tapped
child: CircleAvatar(
backgroundColor: colorPrimary,
radius: 4.h,
backgroundImage: AssetImage(
'assets/images/profile.png',
),
),
),
SizedBox(
width: 2.h,
),
Center(
child: Text(
"Mr. John Khare",
style: Style_File.title.copyWith(color: colorWhite),
)),
Spacer(),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.edit,
size: 18,
color: colorWhite,
)),
],
),
SizedBox(
height: 5.h,
),
Divider(
color: colorGrey,
thickness: 0.1.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Language",
style: Style_File.title.copyWith(color: colorWhite),
)),
Spacer(),
Text(
"English",
style: Style_File.title.copyWith(color: colorGrey),
),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Notification",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"About",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Terms & Conditions",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Text(
"Privacy Policy",
style: Style_File.title.copyWith(color: colorWhite),
)),
IconButton(
onPressed: () {
// Navigator.pop(context);
},
icon: Icon(
Icons.arrow_forward_ios,
size: 18,
color: colorWhite,
)),
],
),
Divider(
color: colorGrey,
thickness: 0.07.h,
),
const SizedBox(
height: 40,
),
Center(
child: ButtonWidget(
text: 'Logout',
onTap: () {},
),
),
])),
),
);
}
}
Output
Contact me
for backend or any other configuration feel free to contact me.
Do like & share my Facebook page. if you find this post helpful. Thank you!!
Related Articles:
- How to Install Flutter in windows 10
- How to Setup Space Between Elements In Flutter
- Flutter Card Widget with Example
- Integrating an API into a Flutter – Working with REST APIs
- Create a simple splash screen in Flutter
- Android Projects with Source Code
- Flutter Interview Questions
- School Database Management System Project
- Create A Simple Splash Screen UI design
- Create Login Page UI Design and Animation For Flutter
- Car Racing Game app with android studio