chore: Redesign textfields

This commit is contained in:
Christian Pauly 2021-01-24 17:26:59 +01:00
parent 0bd0e58b95
commit aef809030d
9 changed files with 74 additions and 91 deletions

View File

@ -64,41 +64,34 @@ class _DefaultAppBarSearchFieldState extends State<DefaultAppBarSearchField> {
return Container(
height: 40,
padding: widget.padding ?? EdgeInsets.only(right: 12),
child: Material(
color: Theme.of(context).secondaryHeaderColor,
borderRadius: BorderRadius.circular(32),
child: TextField(
autofocus: widget.autofocus,
autocorrect: false,
controller: _searchController,
onChanged: widget.onChanged,
focusNode: _focusNode,
readOnly: widget.readOnly,
decoration: InputDecoration(
prefixText: widget.prefixText,
contentPadding: EdgeInsets.only(
top: 8,
bottom: 8,
left: 16,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32),
),
hintText: widget.hintText,
suffixIcon: !widget.readOnly &&
(_focusNode.hasFocus ||
(widget.suffix == null &&
(_searchController.text?.isNotEmpty ?? false)))
? IconButton(
icon: Icon(Icons.backspace_outlined),
onPressed: () {
_searchController.clear();
widget.onChanged?.call('');
_focusNode.unfocus();
},
)
: widget.suffix,
child: TextField(
autofocus: widget.autofocus,
autocorrect: false,
controller: _searchController,
onChanged: widget.onChanged,
focusNode: _focusNode,
readOnly: widget.readOnly,
decoration: InputDecoration(
prefixText: widget.prefixText,
contentPadding: EdgeInsets.only(
top: 8,
bottom: 8,
left: 16,
),
hintText: widget.hintText,
suffixIcon: !widget.readOnly &&
(_focusNode.hasFocus ||
(widget.suffix == null &&
(_searchController.text?.isNotEmpty ?? false)))
? IconButton(
icon: Icon(Icons.backspace_outlined),
onPressed: () {
_searchController.clear();
widget.onChanged?.call('');
_focusNode.unfocus();
},
)
: widget.suffix,
),
),
);

View File

@ -53,6 +53,11 @@ abstract class FluffyThemes {
backgroundColor: AppConfig.primaryColor,
foregroundColor: Colors.white,
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
filled: true,
fillColor: Color(0xFFECECF2),
),
appBarTheme: AppBarTheme(
brightness: Brightness.light,
color: Colors.white,

View File

@ -1085,6 +1085,7 @@ class _ChatState extends State<Chat> {
L10n.of(context).writeAMessage,
hintMaxLines: 1,
border: InputBorder.none,
filled: false,
),
onChanged: (String text) {
typingCoolDown?.cancel();

View File

@ -108,13 +108,13 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
tag: 'loginButton',
child: Container(
width: double.infinity,
height: 50,
height: 56,
padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton(
elevation: 7,
color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
borderRadius: BorderRadius.circular(12),
),
child: _isLoading
? LinearProgressIndicator()

View File

@ -172,39 +172,32 @@ class _LoginState extends State<Login> {
horizontal:
max((MediaQuery.of(context).size.width - 600) / 2, 0)),
children: <Widget>[
ListTile(
leading: CircleAvatar(
child: Icon(Icons.account_box_outlined,
color: Theme.of(context).primaryColor),
),
title: TextField(
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
readOnly: loading,
autocorrect: false,
autofocus: true,
onChanged: (t) => _checkWellKnownWithCoolDown(t, context),
controller: usernameController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.account_box_outlined),
hintText:
'@${L10n.of(context).username.toLowerCase()}:domain',
errorText: usernameError,
labelText: L10n.of(context).username),
),
),
ListTile(
leading: CircleAvatar(
backgroundColor: Theme.of(context).brightness == Brightness.dark
? Color(0xff121212)
: Colors.white,
child: Icon(Icons.lock_outlined,
color: Theme.of(context).primaryColor),
),
title: TextField(
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
readOnly: loading,
autocorrect: false,
controller: passwordController,
obscureText: !showPassword,
onSubmitted: (t) => login(context),
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock_outlined),
hintText: '****',
errorText: passwordError,
suffixIcon: IconButton(
@ -217,17 +210,17 @@ class _LoginState extends State<Login> {
labelText: L10n.of(context).password),
),
),
SizedBox(height: 20),
SizedBox(height: 12),
Hero(
tag: 'loginButton',
child: Container(
height: 50,
height: 56,
padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton(
elevation: 7,
color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
borderRadius: BorderRadius.circular(12),
),
child: loading
? LinearProgressIndicator()

View File

@ -48,7 +48,7 @@ class _NewGroupState extends State<NewGroup> {
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextField(
controller: controller,
autofocus: true,
@ -56,7 +56,6 @@ class _NewGroupState extends State<NewGroup> {
textInputAction: TextInputAction.go,
onSubmitted: (s) => submitAction(context),
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: L10n.of(context).optionalGroupName,
prefixIcon: Icon(Icons.people_outlined),
hintText: L10n.of(context).enterAGroupName),

View File

@ -93,7 +93,7 @@ class _NewPrivateChatState extends State<NewPrivateChat> {
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: Form(
key: _formKey,
child: TextFormField(
@ -121,7 +121,6 @@ class _NewPrivateChatState extends State<NewPrivateChat> {
return null;
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: L10n.of(context).enterAUsername,
prefixIcon: loading
? Container(

View File

@ -88,6 +88,22 @@ class _SignUpState extends State<SignUp> {
tag: 'loginBanner',
child: Image.asset('assets/banner.png'),
),
SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: TextField(
autocorrect: false,
controller: usernameController,
onSubmitted: (s) => signUpAction(context),
decoration: InputDecoration(
prefixIcon: Icon(Icons.account_circle_outlined),
hintText: L10n.of(context).username,
errorText: usernameError,
labelText: L10n.of(context).chooseAUsername,
),
),
),
SizedBox(height: 8),
ListTile(
leading: CircleAvatar(
backgroundImage:
@ -115,37 +131,17 @@ class _SignUpState extends State<SignUp> {
? setAvatarAction
: () => setState(() => avatar = null),
),
ListTile(
leading: CircleAvatar(
backgroundColor: Theme.of(context).brightness == Brightness.dark
? Color(0xff121212)
: Colors.white,
child: Icon(
Icons.account_circle_outlined,
color: Theme.of(context).primaryColor,
),
),
title: TextField(
autocorrect: false,
controller: usernameController,
onSubmitted: (s) => signUpAction(context),
decoration: InputDecoration(
hintText: L10n.of(context).username,
errorText: usernameError,
labelText: L10n.of(context).chooseAUsername),
),
),
SizedBox(height: 20),
SizedBox(height: 16),
Hero(
tag: 'loginButton',
child: Container(
height: 50,
height: 56,
padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton(
elevation: 7,
color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
borderRadius: BorderRadius.circular(12),
),
child: loading
? LinearProgressIndicator()

View File

@ -127,19 +127,16 @@ class _SignUpPasswordState extends State<SignUpPassword> {
padding: EdgeInsets.symmetric(
horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)),
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.lock_outlined,
color: Theme.of(context).primaryColor),
),
title: TextField(
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
controller: passwordController,
obscureText: !showPassword,
autofocus: true,
autocorrect: false,
onSubmitted: (t) => _signUpAction(context),
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock_outlined),
hintText: '****',
errorText: passwordError,
suffixIcon: IconButton(
@ -152,17 +149,17 @@ class _SignUpPasswordState extends State<SignUpPassword> {
labelText: L10n.of(context).password),
),
),
SizedBox(height: 20),
SizedBox(height: 12),
Hero(
tag: 'loginButton',
child: Container(
height: 50,
height: 56,
padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton(
elevation: 7,
color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
borderRadius: BorderRadius.circular(12),
),
child: loading
? LinearProgressIndicator()