material-components-flutter
material-components-flutter copied to clipboard
Input design on forms doesn't accomodate coloured backgrounds
Example code:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const appTitle = 'Form Styling Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatelessWidget {
const MyCustomForm({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.lightGreen,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
fillColor: Colors.white,
filled: true,
labelText: 'Enter your username',
hintText: 'Enter a search term',
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
),
],
),
);
}
}
The instructions on the documentation is unclear as there is no Text()
widget to set TextHeightBehavior
on so then I end up with making do with a super large input component which has super weird spacing for the text being inputted.
Widget _emailField() {
return StreamBuilder<bool>(
stream: _loginController.isEmailValid,
builder: (context, snapshot) {
return TextField(
onChanged: _loginController.onEmailChanged,
keyboardType: TextInputType.emailAddress,
style: const TextStyle(
height: 1.8,
leadingDistribution: TextLeadingDistribution.proportional,
),
decoration: const InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
labelText: "Email Address",
labelStyle: TextStyle(
color: ColorUtils.blue,
),
floatingLabelStyle: TextStyle(
color: ColorUtils.blue,
height: 4,
leadingDistribution: TextLeadingDistribution.proportional,
),
),
);
},
);
}