TextField(
style: TextStyle(
color: Colors.black,
),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(
Icons.location_city,
color: Colors.white,
),
hintText: 'Enter Name',
hintStyle: TextStyle(
color: Colors.grey,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide.none,
),
),
),Category: ‘Flutter’
Flutter TextField Decoration サンプル
Flutter TextField のテーマサンプル
Theme(
data: Theme.of(context).copyWith(splashColor: Colors.transparent),
child: TextField(
autofocus: false,
style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
hintText: 'Username',
contentPadding:
const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(25.7),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(25.7),
),
),
),
);Flutter Firebase Authenticationの操作
Firebase Authenticationへの登録
FirebaseAuth firebaseAuth = FirebaseAuth.instance;
DatabaseReference dbRef = FirebaseDatabase.instance.reference().child('Users');
firebaseAuth
.createUserWithEmailAndPassword(
email: emailController.text,
password: passwordController.text).then((result){
dbRef.child(result.user.uid).set({
'email': emailController.text,
})Firebase Authenticationへのログイン
FirebaseAuth firebaseAuth = FirebaseAuth.instance;
firebaseAuth.signInWithEmailAndPassword(
email: emailController.text,
password: passwordController.text)
.then((result){
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomePage(uid: result.user.uid)),
);
})Firebase Authentication存在確認
FirebaseAuth.instance.currentUser().then((response) { }Firebase Authenticationログアウト
FirebaseAuth auth = FirebaseAuth.instance;
auth.signOut().then((response){}
Dart の非同期処理/同期処理
thenを使用 (非同期処理)
void main(){
print("A");
futurePrint(Duration(milliseconds: 2000), "B")
.then((status) => print(status));
print("C");
futurePrint(Duration(milliseconds: 1000), "D")
.then((status) => print(status));
print("E");
}
Future<String> futurePrint(Duration dr, String msg){
return Future.delayed(dr).then((onValue) => msg);
}
//A
//C
//E
//D
//Basync / await を使用 (同期処理)
void main() async {
print("A");
await futurePrint(Duration(milliseconds: 2000), "B")
.then((status) => print(status));
print("C");
await futurePrint(Duration(milliseconds: 1000), "D")
.then((status) => print(status));
print("E");
}
Future<String> futurePrint(Duration dr, String msg){
return Future.delayed(dr).then((onValue) => msg);
}
//A
//B
//C
//D
//EFlutter MaterialApp と Scaffold
Flutter を勉強し始めた。
そこで少しハマったところを覚え書きとして記載しておく。
下記のコードでも両方動作する。
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Sample Page'),
),
),
);
}Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Page'),
),
);
}上記2つは動作するのだが、その違いは大きい。例えば、前画面から上記のページを下記にて呼んだ場合、前者はナビゲータバーの戻るボタンが表示されない。つまり、ページのスタックに積まれるのはAppレベルではないため階層が異なる。
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));
少しづつだが理解を深めたいと思う。