100日後にFlutter生活:18日目:ログイン画面をパクってみる。
以下の動画で作っているログイン画面を丸パクリしてみます。
僕も、こんなカッコいい画面を作れるようになりたい!
途中(1:54 あたり)まで実装したところで、明日に続きます。 サクサクリロードして画面を見ながら作れるのは、快適だね〜
import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: HomePage(), )); class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( padding: EdgeInsets.symmetric(vertical: 30), width: double.infinity, decoration: BoxDecoration( gradient: LinearGradient(begin: Alignment.topCenter, colors: [ Colors.orange[900], Colors.orange[800], Colors.orange[400], ]), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox(height: 80), Padding( padding: EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Login", style: TextStyle(color: Colors.white, fontSize: 40)), SizedBox(height: 10), Text("Welcome back", style: TextStyle(color: Colors.white, fontSize: 18)), ])), Expanded( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only(topLeft: Radius.circular(60))))) ], )), ); } }