Flutter : Login Page Design

Di tengah kondisi WFH ini, saya mencoba mempelajari Flutter sebagai tools yang digunakan untuk membagun aplikasi mobile. Mengapa flutter bukan A, B atau C ? ya jawabannya simple aja, lagi bosen dan mencari ilmu baru. Flutter ini kan tergolong baru ya, siapa tau kolamnya masih sedikit yang mancing, jadi kesempatan dapet ikannya lebih besar, soalnya kolam sebelah kayaknya sudah banyak yang mancing di situ.

Banyak tutorial flutter yang bertebaran di Internet, mau yang versi mudah sampe versi kompleks. Karena ini web bukan untuk ngejar traffic, cuma buat iseng aja, jadi saya ga mau nulis tutorial step-by-step flutter etc etc. Ini cuma hasil koding saya, membuat desain aplikasi login. Inspirasi saya dapatkan dari dribble https://dribbble.com/shots/3309394-Sign-In-Daily-UI-001

Kira-kira hasilnya seperti ini

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color.fromRGBO(68, 215, 213, 1.0),
                Color.fromRGBO(153, 225, 233, 1.0)
              ]),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: Image(image: AssetImage('images/focus.png'),height: 100,width: 100,),
            ),
            CustomTextField('Username'),
            SizedBox(
              height: 20,
            ),
            CustomTextField('Password'),
            SizedBox(
              height: 20,
            ),
            CustomButton("Sign In"),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                    flex: 1,
                    child: Container(
                        child: Text(
                      "Sign Up",
                      style: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    ))),
                Flexible(
                    flex: 1,
                    child: Container(
                        child: Text(
                      "Need Help?",
                      style: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    )))
              ],
            )
          ],
        ),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  String textButton;
  CustomButton(this.textButton);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: double.infinity,
      child: RaisedButton(
          color: Colors.white,
          elevation: 5,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: Text(textButton,
              style: TextStyle(
                  fontSize: 16, color: Color.fromRGBO(80, 225, 200, 1.0))),
          onPressed: () =>{};
          ),
    );
  }
}

class CustomTextField extends StatelessWidget {
  String customHintText;
  CustomTextField(this.customHintText);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(20, 5, 20, 5),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(25)),
      child: TextField(
        style: TextStyle(color: Colors.white),
        decoration: InputDecoration(
            hintStyle: TextStyle(color: Colors.white),
            hintText: customHintText,
            border: InputBorder.none),
      ),
    );
  }
}