Add new input theme/style (#90)

This commit is contained in:
Tommy Chow 2022-06-29 19:30:24 -04:00
parent 8dfabb7ba9
commit 390b4cca1e
4 changed files with 31 additions and 13 deletions

View file

@ -78,6 +78,23 @@ final navigatorKey = GlobalKey<NavigatorState>();
const gray = Color.fromRGBO(22, 22, 22, 1.0);
const purple = Color(0xff9146ff);
const inputTheme = InputDecorationTheme(
filled: true,
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
borderSide: BorderSide(style: BorderStyle.none),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
borderSide: BorderSide(style: BorderStyle.none),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
borderSide: BorderSide(style: BorderStyle.none),
),
);
final lightTheme = ThemeData(
canvasColor: Colors.white,
splashFactory: Platform.isIOS ? NoSplash.splashFactory : null,
@ -102,6 +119,7 @@ final lightTheme = ThemeData(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
),
inputDecorationTheme: inputTheme,
);
final darkTheme = ThemeData(
@ -126,6 +144,7 @@ final darkTheme = ThemeData(
),
dialogBackgroundColor: gray,
toggleableActiveColor: purple,
inputDecorationTheme: inputTheme,
);
final oledTheme = ThemeData(
@ -148,6 +167,7 @@ final oledTheme = ThemeData(
),
dialogBackgroundColor: Colors.black,
toggleableActiveColor: purple,
inputDecorationTheme: inputTheme,
);
class MyApp extends StatelessWidget {

View file

@ -114,7 +114,11 @@ class Chat extends StatelessWidget {
),
),
),
if (chatStore.settings.showBottomBar) ChatBottomBar(chatStore: chatStore),
if (chatStore.settings.showBottomBar)
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: ChatBottomBar(chatStore: chatStore),
),
AnimatedContainer(
curve: Curves.ease,
duration: const Duration(milliseconds: 200),

View file

@ -122,6 +122,7 @@ class ChatBottomBar extends StatelessWidget {
maxLines: 5,
enabled: chatStore.auth.isLoggedIn ? true : false,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
suffixIcon: IconButton(
color: chatStore.assetsStore.showEmoteMenu ? Theme.of(context).colorScheme.secondary : null,
tooltip: 'Emote menu',
@ -132,11 +133,7 @@ class ChatBottomBar extends StatelessWidget {
},
),
hintMaxLines: 1,
contentPadding: const EdgeInsets.all(10.0),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
labelText: chatStore.auth.isLoggedIn ? 'Send a message' : 'Log in to chat',
hintText: chatStore.auth.isLoggedIn ? 'Send a message' : 'Log in to chat',
),
controller: chatStore.textController,
onSubmitted: chatStore.sendMessage,

View file

@ -44,13 +44,11 @@ class _SearchState extends State<Search> {
controller: _textEditingController,
autocorrect: false,
decoration: InputDecoration(
isDense: true,
labelText: 'Find a channel or category',
contentPadding: const EdgeInsets.all(10.0),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
contentPadding: const EdgeInsets.all(0.0),
hintText: 'Find a channel or category',
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(
icon: const Icon(Icons.clear),
tooltip: 'Clear search',
onPressed: () {
FocusScope.of(context).unfocus();
@ -58,7 +56,6 @@ class _SearchState extends State<Search> {
_textEditingController.clear();
});
},
icon: const Icon(Icons.clear),
),
),
onSubmitted: _searchStore.handleQuery,