【Flutter】 Button風のTextFieldを作ってみる【borderの色変えもあり】

どーも、ぐるたか@guru_takaです。

Flutterでボタン風のTextFieldを作ってみました！

ちょっと詰まったところもあったので、備忘録としてまとめます。

スポンサードリンク

ソース
簡単な解説
参考リンク

ソース

まずはソースから！

TextField(
            decoration: InputDecoration(
              //Focusしていないとき
              enabledBorder: new OutlineInputBorder(
                borderRadius: new BorderRadius.circular(25.0),
                borderSide: BorderSide(
                  color: Colors.black,
                ),
              ),
              //Focusしているとき
              focusedBorder: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(25.0),
                borderSide: BorderSide(
                  color: Colors.blue,
                  width: 3.0,
                ),
              ),
              hintText: 'にゃーん',
              contentPadding: EdgeInsets.all(16.0),
              suffixIcon: IconButton(
                icon: Icon(
                  Icons.add,
                  color: Colors.black,
                ),
                onPressed: () {},
              ),
            ),
          )