もっぺんプログラミング(´・ω・`)

もっぺん頑張って副業プログラマを目指してます。

100日後にFlutter生活:18日目:ログイン画面をパクってみる。

以下の動画で作っているログイン画面を丸パクリしてみます。

僕も、こんなカッコいい画面を作れるようになりたい!

www.youtube.com

途中(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)))))
            ],
          )),
    );
  }
}