Create native settings Page UI in Flutter
Published May 02, 2020Every App will maintain settings page to handle different events.
In this post we are going to learn create simple native settings page ui.
For this we are going to use settings_ui: ^0.2.0
Let's get Started
Step 1: Create Flutter Application
Step 2: Add dependencies
dependencies:
flutter:
sdk: flutter
settings_ui: ^0.2.0
|
Step 3: Add below screens
settingspage
import 'package:flutter/material.dart';
import 'package:settings_ui/settings_ui.dart';
import 'languages_screen.dart';
class SettingsScreen extends StatefulWidget {
@override
_SettingsScreenState createState() => _SettingsScreenState();
}
class _SettingsScreenState extends State<SettingsScreen> {
bool lockInBackground = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Settings UI')),
body: SettingsList(
sections: [
SettingsSection(
title: 'Common',
tiles: [
SettingsTile(
title: 'Language',
subtitle: 'English',
leading: Icon(Icons.language),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => LanguagesScreen()));
},
),
SettingsTile(
title: 'Environment',
subtitle: 'Production',
leading: Icon(Icons.cloud_queue)),
],
),
SettingsSection(
title: 'Account',
tiles: [
SettingsTile(title: 'Phone number', leading: Icon(Icons.phone)),
SettingsTile(title: 'Email', leading: Icon(Icons.email)),
SettingsTile(title: 'Sign out', leading: Icon(Icons.exit_to_app)),
],
),
SettingsSection(
title: 'Secutiry',
tiles: [
SettingsTile.switchTile(
title: 'Lock app in background',
leading: Icon(Icons.phonelink_lock),
switchValue: lockInBackground,
onToggle: (bool value) {
setState(() {
lockInBackground = value;
});
},
),
SettingsTile.switchTile(
title: 'Use fingerprint',
leading: Icon(Icons.fingerprint),
onToggle: (bool value) {},
switchValue: false),
SettingsTile.switchTile(
title: 'Change password',
leading: Icon(Icons.lock),
switchValue: true,
onToggle: (bool value) {},
),
],
),
SettingsSection(
title: 'Misc',
tiles: [
SettingsTile(
title: 'Terms of Service', leading: Icon(Icons.description)),
SettingsTile(
title: 'Open source licenses',
leading: Icon(Icons.collections_bookmark)),
],
)
],
),
);
}
}
|
Language page
import 'package:flutter/material.dart';
class LanguagesScreen extends StatefulWidget {
@override
_LanguagesScreenState createState() => _LanguagesScreenState();
}
class _LanguagesScreenState extends State<LanguagesScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Languages')),
);
}
}
|
Step 4: Update main dart page
import 'package:flutter/material.dart';
import 'screens/settings_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Settings UI Demo',
theme: ThemeData(
primarySwatch: Colors.deepOrange,
brightness: Brightness.light,
),
darkTheme: ThemeData(
primarySwatch: Colors.deepPurple,
accentColor: Colors.deepPurple,
brightness: Brightness.dark,
),
home: SettingsScreen(),
);
}
}
|
Article Contributed By :
|
|
|
|
6443 Views |