Add sectioned settings & section header widget

This commit is contained in:
Tommy Chow 2021-12-28 22:52:29 -05:00
parent f5ba55f52d
commit e66c4c7067
7 changed files with 153 additions and 67 deletions

View 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),
],
);
},
);
}
}

View 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,
),
],
);
},
);
}
}

View file

@ -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'),
),
);
},
),

View file

@ -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),
],
),
);
}

View 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,
),
],
);
},
);
}
}

View file

@ -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,

View 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),
),
);
}
}