Tampilan Login Flutter Simple Tapi Keren

Tampilan halaman login flutter yang sederhana tapi keren. Script UI login flutter.

Flutter login template free. Flutter login desain UI free. Membuat tampilan login yang modern di flutter. Tampilan login cepat di flutter. Panduan Membuat Tampilan Login Menggunakan Flutter: Script dan Kode yang Mudah Dipahami. Cara membuat tampilan login yang menarik dan responsif menggunakan Flutter. Tampilan Halaman ListView Keren dan Modern

1. Buat sebuah project flutter baru dengan nama yang kalian suka. Lalu buka lib/main.dart kemudian ganti dengan script di bawah ini.



// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

  import 'package:flutter/material.dart';
  
  void main() => runApp(LoginApp());
  
  class LoginApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Login',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: LoginPage(),
      );
    }
  }
  
  class LoginPage extends StatefulWidget {
    @override
    _LoginPageState createState() => _LoginPageState();
  }
  
  class _LoginPageState extends State<LoginPage> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Column(
          children: [
            Container(
              width: double.infinity,
              height: MediaQuery.of(context).size.height * 0.35,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      'https://cdn.pixabay.com/photo/2022/01/11/17/04/city-6931092_1280.jpg'), // Ganti dengan URL gambar Anda
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Welcome to \nSahreApp 👏',
                          style: TextStyle(
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                            // color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 20),
                        Text(
                          'Please login to get started',
                          style: TextStyle(
                            fontSize: 16,
                            // color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: 'Email',
                        border: OutlineInputBorder(),
                        contentPadding: EdgeInsets.symmetric(
                          vertical:
                              16, // Ubah ukuran vertikal sesuai keinginan Anda
                          horizontal:
                              10, // Ubah ukuran horizontal sesuai keinginan Anda
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    TextFormField(
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: 'Password',
                        border: OutlineInputBorder(),
                        contentPadding: EdgeInsets.symmetric(
                          vertical:
                              16, // Ubah ukuran vertikal sesuai keinginan Anda
                          horizontal:
                              10, // Ubah ukuran horizontal sesuai keinginan Anda
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Text(
                          'Forgot Password',
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.blue,
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 20),
                    SizedBox(
                      height: 45,
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text('Login'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: FractionallySizedBox(
                widthFactor: 0.8,
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 20),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'Dont have an account yet? ',
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                      Text(
                        'Register!',
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.blue,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }

2. Tampilan saat dijalankan seperti gambar di bawah ini. Kita menggunakan beberapa widget seperti network image, text, textformfield, listview, column, row, dan button