Flutter Tutorial - Desain Login Page


Desain Login Page


Pada tutorial ini, kita akan membahas cara pembuatan User Interface (UI) halaman login, sebelum kita melakukan pengkodean halaman login, ada baiknya kita perlu membuat sketsa halaman login yang akan kita buat, ada pun tampilan halaman login yang akan kita buat adalah sebagai berikut:

Gambar 1. Flutter Login Page UI

Halaman login yang akan kita buat adalah seperti Gambar 1, dimana user nantinya akan memasukkan username dan password, kemudian ada sebuah tombol (button) login, dimana button ini nantinya akan di klik oleh user pada saat melakukan login, tutorial kali ini hanya membahas cara pembuatan tampilannya saja, dari Gambar 1 tersebut, dapat kita buat blue print sederhana, agar proses pembuatan kode menjadi lebih gampang, berikut adalah blue print dari UI login tersebut.

Gambar 2. Blue Print UI Login Page

Dari Gambar 2 tersebut, bisa kita lihat bahwa UI yang kita buat akan dibungkus (wrap) oleh Widget Center.

Center(
  child: ...
)

hal ini ditujukan untuk membuat Widget berada di tengah-tengah layar smartphone, kemudian terdapat space (ruang) disebelah kanan dan kiri, untuk membuat ruang tersebut dapat kita gunakan Widget Padding.

Center(
  child: Padding(
     padding: EdgeInsets.only(left: 20.0, right: 20.0),
     child: ...
  )
)

berikutnya kita gunakan Widget Column untuk input username, password dan button login.

Center(
  child: Padding(
     padding: EdgeInsets.only(left: 20.0, right: 20.0),
     child: Column(
        mainAxisAlignment: MainAxisAligment.center,
        children:<Widget>[
          ...
        ]
     )
  )
)

dari Gambar 2 juga bisa kita lihat, ada ruang (space) diantara username, password dan button, untuk membuat ruang ini bisa juga kita gunakan Widget Padding, desain dari input username dan password memiliki icon disebelah kiri dari masing-masing widget, hal ini bisa kita buat dengan properti decoration: InputDecoration() dari Widget TextField.

//Username
TextField(
  decoration: InputDecoration(
     icon: Icon(Icons.account_circle),
     labelText: 'Username',
  ),
),

Padding(
  padding: EdgeInsets.only(bottom: 20.0),
),

//Password
TextField(
  decoration: InputDecoration(
     icon: Icon(Icons.account_circle),
     labelText: 'Password',
  ),
  obscureText: true, // agar teks yang diinput berubah jadi simbol *
),

dengan demikian susunan dari widget yang terdapat pada widget Column adalah sebagai berikut:

Center(
  child: Padding(
     padding: EdgeInsets.only(left: 20.0, right: 20.0),
     child: Column(
        mainAxisAlignment: MainAxisAligment.center,
        children: <Widget>[
          //Username
          TextField...
          Padding...
          //password
          TextField...
        ]
     )
  )
)

Widget yang terakhir adalah Button Login, widget ini kita buat akan memenuhi ruang yang disediakan dan sebelah kiri dari widget ini akan kita buat ruang (space) agar sejajar dengan input password yang kita buat sebelumnya, oleh karena itu widget ini akan kita bungkus dengan widget Padding dan dibungkus lagi dengan widget Expand, widget Expand akan menghasilkan error jika langsung kita letakkan pada widget Column, oleh karena itu widget Expand ini akan kita bungkus dengan widget Row.

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  childreen: <Widget>[
    Expanded(
      child: Padding (
        padding: EdgeInsets.only(left: 40.0),
        child: RaisedButton(
          onPressed: (){},
          child: Text('Login'),
        ),
      ),
    ),
  ],
)

Dengan demikian susunan dari widget pada widget Column adalah sebagai berikut:

Center(
  child: Padding(
     padding: EdgeInsets.only(left: 20.0, right: 20.0),
     child: Column(
        mainAxisAlignment: MainAxisAligment.center,
        children: <Widget>[
          //Username
          TextField...
          Padding...
          //password
          TextField...
          //button login
          Row ...
        ]
     )
  )
)

Berikut adalah kode lengkap dari desain UI Login Page yang akan kita buat.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo Login Page',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Login Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.only(left: 20.0, right: 20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                children: <Widget>[
                  TextField(
                    decoration: InputDecoration(
                      icon: Icon(Icons.account_circle),
                      labelText: 'Username',
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(bottom: 20.0),
                  ),
                  //Password TextField
                  TextField(
                    decoration: InputDecoration(
                      icon: Icon(Icons.lock),
                      labelText: 'Password',
                    ),
                    obscureText: true,
                  ),
                  Padding(
                    padding: EdgeInsets.only(bottom: 20.0),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(left: 40.0),
                          child: RaisedButton(
                            onPressed: () {},
                            child: Text('Login'),
                          ),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Flutter Tutorial - Desain Login Page Flutter Tutorial - Desain Login Page Reviewed by jc on September 17, 2019 Rating: 5

No comments:

Powered by Blogger.