Add sectioned settings & section header widget
This commit is contained in:
parent
f5ba55f52d
commit
e66c4c7067
7 changed files with 153 additions and 67 deletions
32
lib/core/settings/account_settings.dart
Normal file
32
lib/core/settings/account_settings.dart
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:frosty/core/auth/auth_store.dart';
|
||||
import 'package:frosty/core/settings/profile_card.dart';
|
||||
import 'package:frosty/core/settings/settings_store.dart';
|
||||
import 'package:frosty/widgets/section_header.dart';
|
||||
|
||||
class AccountSettings extends StatelessWidget {
|
||||
final SettingsStore settingsStore;
|
||||
final AuthStore authStore;
|
||||
|
||||
const AccountSettings({
|
||||
Key? key,
|
||||
required this.settingsStore,
|
||||
required this.authStore,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Observer(
|
||||
builder: (context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SectionHeader('ACCOUNT'),
|
||||
ProfileCard(authStore: authStore),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
34
lib/core/settings/chat_settings.dart
Normal file
34
lib/core/settings/chat_settings.dart
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:frosty/core/settings/settings_store.dart';
|
||||
import 'package:frosty/widgets/section_header.dart';
|
||||
|
||||
class ChatSettings extends StatelessWidget {
|
||||
final SettingsStore settingsStore;
|
||||
|
||||
const ChatSettings({Key? key, required this.settingsStore}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Observer(
|
||||
builder: (context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SectionHeader('CHAT'),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Hide Banned Messages'),
|
||||
value: settingsStore.hideBannedMessages,
|
||||
onChanged: (newValue) => settingsStore.hideBannedMessages = newValue,
|
||||
),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Enable Zero-Width Emotes'),
|
||||
value: settingsStore.zeroWidthEnabled,
|
||||
onChanged: (newValue) => settingsStore.zeroWidthEnabled = newValue,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ class ProfileCard extends StatelessWidget {
|
|||
return showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Logout'),
|
||||
title: const Text('Log Out'),
|
||||
content: const Text('Are you sure you want to log out?'),
|
||||
actions: [
|
||||
TextButton(
|
||||
|
|
@ -43,12 +43,20 @@ class ProfileCard extends StatelessWidget {
|
|||
foregroundImage: CachedNetworkImageProvider(authStore.user.details!.profileImageUrl),
|
||||
),
|
||||
title: Text(authStore.user.details!.displayName),
|
||||
onTap: () => _showDialog(context),
|
||||
trailing: OutlinedButton(
|
||||
onPressed: () => _showDialog(context),
|
||||
child: const Text('Log Out'),
|
||||
style: OutlinedButton.styleFrom(primary: Colors.red),
|
||||
),
|
||||
);
|
||||
}
|
||||
return ElevatedButton(
|
||||
onPressed: authStore.login,
|
||||
child: const Text('Login'),
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(10.0),
|
||||
width: double.infinity,
|
||||
child: OutlinedButton(
|
||||
onPressed: authStore.login,
|
||||
child: const Text('Log In'),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:frosty/core/auth/auth_store.dart';
|
||||
import 'package:frosty/core/settings/profile_card.dart';
|
||||
import 'package:frosty/core/settings/account_settings.dart';
|
||||
import 'package:frosty/core/settings/chat_settings.dart';
|
||||
import 'package:frosty/core/settings/settings_store.dart';
|
||||
import 'package:frosty/core/settings/video_settings.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class Settings extends StatelessWidget {
|
||||
|
|
@ -16,34 +17,12 @@ class Settings extends StatelessWidget {
|
|||
appBar: AppBar(
|
||||
title: const Text('Settings'),
|
||||
),
|
||||
body: Observer(
|
||||
builder: (_) {
|
||||
return ListView(
|
||||
children: [
|
||||
ProfileCard(authStore: context.read<AuthStore>()),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Enable Video'),
|
||||
value: settingsStore.videoEnabled,
|
||||
onChanged: (newValue) => settingsStore.videoEnabled = newValue,
|
||||
),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Enable Video Overlay'),
|
||||
value: settingsStore.overlayEnabled,
|
||||
onChanged: (newValue) => settingsStore.overlayEnabled = newValue,
|
||||
),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Hide Banned Messages'),
|
||||
value: settingsStore.hideBannedMessages,
|
||||
onChanged: (newValue) => settingsStore.hideBannedMessages = newValue,
|
||||
),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Enable Zero-Width Emotes'),
|
||||
value: settingsStore.zeroWidthEnabled,
|
||||
onChanged: (newValue) => settingsStore.zeroWidthEnabled = newValue,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
body: ListView(
|
||||
children: [
|
||||
AccountSettings(settingsStore: settingsStore, authStore: context.read<AuthStore>()),
|
||||
VideoSettings(settingsStore: settingsStore),
|
||||
ChatSettings(settingsStore: settingsStore),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
34
lib/core/settings/video_settings.dart
Normal file
34
lib/core/settings/video_settings.dart
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:frosty/core/settings/settings_store.dart';
|
||||
import 'package:frosty/widgets/section_header.dart';
|
||||
|
||||
class VideoSettings extends StatelessWidget {
|
||||
final SettingsStore settingsStore;
|
||||
|
||||
const VideoSettings({Key? key, required this.settingsStore}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Observer(
|
||||
builder: (context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SectionHeader('VIDEO'),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Enable Video'),
|
||||
value: settingsStore.videoEnabled,
|
||||
onChanged: (newValue) => settingsStore.videoEnabled = newValue,
|
||||
),
|
||||
SwitchListTile.adaptive(
|
||||
title: const Text('Enable Video Overlay'),
|
||||
value: settingsStore.overlayEnabled,
|
||||
onChanged: (newValue) => settingsStore.overlayEnabled = newValue,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:frosty/models/emotes.dart';
|
||||
import 'package:frosty/screens/channel/chat/emote_menu/emote_menu_section.dart';
|
||||
import 'package:frosty/widgets/section_header.dart';
|
||||
|
||||
class EmoteMenuPanel extends StatelessWidget {
|
||||
final TextEditingController textController;
|
||||
|
|
@ -10,9 +11,6 @@ class EmoteMenuPanel extends StatelessWidget {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
const headerStyle = TextStyle(fontSize: 20, fontWeight: FontWeight.bold);
|
||||
const headerPadding = EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 5.0);
|
||||
|
||||
final globalEmotes = emotes
|
||||
.where((emote) =>
|
||||
emote.type == EmoteType.twitchGlobal ||
|
||||
|
|
@ -37,14 +35,10 @@ class EmoteMenuPanel extends StatelessWidget {
|
|||
slivers: [
|
||||
if (globalEmotes.isNotEmpty) ...[
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
|
||||
child: Text(
|
||||
'Global Emotes',
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: SectionHeader(
|
||||
'Global Emotes',
|
||||
padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
|
||||
)),
|
||||
EmoteMenuSection(
|
||||
textController: textController,
|
||||
emotes: globalEmotes,
|
||||
|
|
@ -52,13 +46,7 @@ class EmoteMenuPanel extends StatelessWidget {
|
|||
],
|
||||
if (channelEmotes.isNotEmpty) ...[
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: headerPadding,
|
||||
child: Text(
|
||||
'Channel Emotes',
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
child: SectionHeader('Channel Emotes'),
|
||||
),
|
||||
EmoteMenuSection(
|
||||
textController: textController,
|
||||
|
|
@ -67,13 +55,7 @@ class EmoteMenuPanel extends StatelessWidget {
|
|||
],
|
||||
if (subEmotes.isNotEmpty) ...[
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: headerPadding,
|
||||
child: Text(
|
||||
'Subbed Emotes',
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
child: SectionHeader('Subbed Emotes'),
|
||||
),
|
||||
EmoteMenuSection(
|
||||
textController: textController,
|
||||
|
|
@ -82,13 +64,7 @@ class EmoteMenuPanel extends StatelessWidget {
|
|||
],
|
||||
if (miscEmotes.isNotEmpty) ...[
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: headerPadding,
|
||||
child: Text(
|
||||
'Unlocked Emotes',
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
child: SectionHeader('Unlocked Emotes'),
|
||||
),
|
||||
EmoteMenuSection(
|
||||
textController: textController,
|
||||
|
|
|
|||
23
lib/widgets/section_header.dart
Normal file
23
lib/widgets/section_header.dart
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
class SectionHeader extends StatelessWidget {
|
||||
final String text;
|
||||
final EdgeInsets padding;
|
||||
|
||||
const SectionHeader(
|
||||
this.text, {
|
||||
Key? key,
|
||||
this.padding = const EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 5.0),
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: padding,
|
||||
child: Text(
|
||||
text,
|
||||
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue