Home Mobile Membuat halaman Login dan Register

Membuat halaman Login dan Register

0

Buatlah package dan file seperi gambar dibawah ini :

lalu isikan code pada file main.dart :

import 'package:flutter/material.dart';
import 'package:login_register/ui_view/login.dart';
import 'package:login_register/ui_view/signup.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: 'Login Regiter',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: HomePage(),
   );
 }
}
class HomePage extends StatelessWidget {
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.lightBlue,
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Icon(Icons.android, color: Colors.white, size: 45,),
           SizedBox(height: 200,),
           Text("Welcome to Flutter",
               style: TextStyle(color: Colors.white, fontSize: 22)),
           SizedBox(height: 10,),
           Text("Get real-time updates about what",
             style: TextStyle(color: Colors.white, fontSize: 18),),
           Text("maters to you",
             style: TextStyle(color: Colors.white, fontSize: 18),),
           SizedBox(height: 18,),
           MaterialButton(
             minWidth: 210,
             color: Colors.white,
             textColor: Colors.lightBlue,
             child: Text("Sign Up",
               style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
             onPressed: () {
               Navigator.push(context, MaterialPageRoute(builder: (context) => SignUp()));
             },
           ),
           TextButton(
             child: Text("Log In", style: TextStyle(color: Colors.white,
                 fontWeight: FontWeight.bold,
                 fontSize: 18),),
             onPressed: () {
               Navigator.push(context, MaterialPageRoute(builder: (context) => Login()));
             },
           )
         ],
       ),
     ),
   );
 }
}

lalu isikan code pada file login.dart :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:login_register/ui_view/signup.dart';

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

class Login extends StatelessWidget {
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.lime,
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.white,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Email",
                   border: InputBorder.none
               ),
             ),
           ),
           SizedBox(height: 10,),
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.white,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Password",
                   border: InputBorder.none
               ),
             ),
           ),
           SizedBox(height: 20,),
           MaterialButton(
             padding: EdgeInsets.all(20),
             minWidth: 250,
             color: Colors.white,
             child: Text("Login", style: TextStyle(color: Colors.blue, fontSize: 15, fontWeight: FontWeight.bold),),
             onPressed: () {

             },
           ),
           TextButton(
             child: Text("Not a member? Signup now",
               style: TextStyle(color: Colors.white),),
             onPressed: () {
               Navigator.push(
                   context, MaterialPageRoute(builder: (context) => SignUp()));
             },
           )
         ],
       ),
     ),
   );
 }
}

lalu isikan code pada file login.dart :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:login_register/ui_view/signup.dart';

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

class Login extends StatelessWidget {
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.lime,
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.white,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Email",
                   border: InputBorder.none
               ),
             ),
           ),
           SizedBox(height: 10,),
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.white,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Password",
                   border: InputBorder.none
               ),
             ),
           ),
           SizedBox(height: 20,),
           MaterialButton(
             padding: EdgeInsets.all(20),
             minWidth: 250,
             color: Colors.white,
             child: Text("Login", style: TextStyle(color: Colors.blue, fontSize: 15, fontWeight: FontWeight.bold),),
             onPressed: () {

             },
           ),
           TextButton(
             child: Text("Not a member? Signup now",
               style: TextStyle(color: Colors.white),),
             onPressed: () {
               Navigator.push(
                   context, MaterialPageRoute(builder: (context) => SignUp()));
             },
           )
         ],
       ),
     ),
   );
 }
}

lalu isikan code pada file signup.dart :

import 'package:flutter/material.dart';
import 'package:login_register/ui_view/login.dart';

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


class SignUp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.yellow,

     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.black87,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Fullname",
                   hintStyle: TextStyle(color: Colors.white),
                   border: InputBorder.none
               ),
             ),
           ),
           SizedBox(height: 10,),
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.black87,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Email",
                   hintStyle: TextStyle(color: Colors.white),
                   border: InputBorder.none
               ),
             ),
           ),
           SizedBox(height: 10,),
           Container(
             padding: EdgeInsets.all(10),
             width: 250,
             color: Colors.black87,
             child: TextFormField(
               decoration: InputDecoration(
                   hintText: "Password",
                   hintStyle: TextStyle(color: Colors.white),
                   border: InputBorder.none

               ),
             ),
           ),
           SizedBox(height: 20,),
           MaterialButton(
             padding: EdgeInsets.all(20),
             minWidth: 250,
             child: Text("REGISTER", style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),),
             color: Colors.black,
             onPressed: (){},
           ),
           TextButton(
             child: Text("Already registered? Login me", style: TextStyle(color: Colors.white)),
             onPressed: (){
               Navigator.push(context, MaterialPageRoute(builder: (context) => Login()));
             },
           )
         ],
       ),
     ),
   );
 }
}

hasilnya akan seperti ini :