LoginSignup
0

More than 1 year has passed since last update.

TextFormFieldをたくさん並べるfileをすっきりさせる

Last updated at Posted at 2022-09-16

TextFormFieldをたくさん使うアプリをつくっているので 

 違うのはHintTextとonChangedのところだけなのに、設定でやたらfileが長くなるのを避けたい。
 ということで、設定を独立させてみました。 
 サイズや色を一括で変えられます。もしそれにもバリエションがほしければ、変数を増やすか、classを分けたらいいと思います。でも、変数をあまり増やすと、すっきり感は減ってしまいますね。

import 'package:flutter/material.dart';

class Format extends StatelessWidget {
  final String hintText;
  final ValueChanged<String> onChanged;

  const Format({
    required this.hintText,
    required this.onChanged,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(5.0),
        hintText: hintText,
        hintStyle: const TextStyle(
            fontSize: 14,
            color: Colors.green),
        fillColor: Colors.lightGreen[100],
        filled: true,
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: const BorderSide(
            color: Colors.lightGreen,
            width: 2.0,
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: const BorderSide(
            color: Colors.lightGreen,
            width: 1.0,
          ),
        ),
      ),
      onChanged: onChanged,
    );
  }
}

使うときはたったこれだけ 

child: Format(
         hintText: "Your Hint Text",
         onChanged: (text) {変数名 = text;
                            },
                  )

ああ、すっきりした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0