Login page💻sandi
"Yo, guys! Udah lama banget nggak share tutorial, kali ini gue mau tunjukin ke kalian gimana caranya bikin tampilan login page yang estetik banget dengan Flutter! 😎. Kalo kalian lagi nyari tampilan login yang simple tapi keren, mungkin tutorial ini bakal berguna banget buat kalian!"
"Gak cuma tampilannya yang kece, tapi dengan menggunakan Navigator, kita juga bisa pindah halaman setelah user klik tombol login. Jadi, semuanya jadi lebih interaktif! 🚀"
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Estetik',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
debugShowCheckedModeBanner:false,
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// Background Gradient
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.purple.shade300, Colors.blue.shade600],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
// Content of the Login Page
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Logo (Gambar yang sudah didaftarkan)
Container(
height: 150,
child: Image.asset('lib/22277.png'), // Menampilkan gambar
),
SizedBox(height: 30),
// Field Username
TextField(
decoration: InputDecoration(
hintText: 'Username or Email',
hintStyle: TextStyle(color: Colors.white.withOpacity(0.6)),
filled: true,
fillColor: Colors.white.withOpacity(0.1),
prefixIcon: Icon(Icons.person_outline, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none,
),
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 20),
),
),
SizedBox(height: 20),
// Field Password
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white.withOpacity(0.6)),
filled: true,
fillColor: Colors.white.withOpacity(0.1),
prefixIcon: Icon(Icons.lock_outline, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none,
),
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 20),
),
),
SizedBox(height: 30),
// Login Button
GestureDetector(
onTap: () {
// Navigasi ke halaman baru (HomePage) setelah klik login
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
width: double.infinity,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(
colors: [Colors.blue.shade600, Colors.purple.shade300],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
),
),
],
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
backgroundColor: Color.fromARGB(255, 71, 113, 150),
),
body: Center(
child: Text(
'Selamat Datang di apk!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
);
}
}
"Jadi, gimana guys? Kode ini tuh simple banget kan, tapi bisa bikin tampilan login lo jadi estetik dan interaktif! Gue juga udah tambahin navigasi ke halaman baru setelah login sukses, jadi user experience-nya makin keren."
"Gimana, mudah banget kan? Tinggal ikutin langkah-langkahnya, dan lo udah bisa bikin login page Flutter yang keren abis! Semoga bermanfaat, dan jangan lupa komen di bawah kalau ada pertanyaan atau saran. Keep coding, guys! 🔥💻"
hasil saya:https://zxhg06koxhh0.zapp.page/
Komentar
Posting Komentar