FlutterでTextFieldをカスタマイズする

FlutterでおしゃれなTextForm作れた pic.twitter.com/svGBJjV6N5

— shogo.yamada@Flutterマン (@yshogo87) June 8, 2019

上のツイートのようなもりもりにカスタマイズできます。

        child: Center(
          child: Container(
            margin: const EdgeInsets.only(left: 10, right: 10),
            child: Theme(
              data: new ThemeData(
                primaryColor: Colors.redAccent,
                primaryColorDark: Colors.red,
              ),
              child: TextField(
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.teal)),
                    hintText: 'Tell us about yourself',
                    helperText: 'Keep it short, this is just a demo.',
                    labelText: 'Life story',
                    prefixIcon: const Icon(
                      Icons.phone_iphone,
                      color: Colors.green,
                    ),
                    prefixText: ' ',
                    suffixText: "USD",
                    suffixStyle: const TextStyle(color: Colors.green)),
              ),
            ),
          ),
        )