【Flutter】テキスト入力:Textfiled使い方を3分で解説!（サンプルコードあり）

import 'package:flutter/material.dart';

void main() => runApp(TextfieldDemo());

class TextfieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テキストフォームデモ'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                TextField(
                  maxLength: 50,
                  enabled: true,
                  maxLines:2 ,
                  decoration: InputDecoration(
                    icon: Icon(Icons.login),
                    labelText: 'ログイン番号',
                    // border: InputBorder.none,
                    hintText: 'メールアドレスを入力して下さい',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    ),
                  ),
                  keyboardType: TextInputType.emailAddress,
                ),
                TextField(
                  maxLength: 10,
                  enabled: true,
                  obscureText: true,
                  style: TextStyle(color: Colors.red),
                  decoration: InputDecoration(
                    icon: Icon(Icons.password),
                    labelText: 'パスワード',
                    // border: InputBorder.none,
                    hintText: '半角英数記号で入力して下さい',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}