Skip to content
This repository has been archived by the owner on Nov 30, 2023. It is now read-only.

Input design on forms doesn't accomodate coloured backgrounds #106

Open
CP-casp opened this issue Oct 26, 2021 · 0 comments
Open

Input design on forms doesn't accomodate coloured backgrounds #106

CP-casp opened this issue Oct 26, 2021 · 0 comments

Comments

@CP-casp
Copy link

CP-casp commented Oct 26, 2021

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

image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant