Hari ini kita akan mencoba membuat page login kembali, tapi berbeda dengan sebelumnya. Pada pembuatan Login kali ini kita akan menerapkan new step dalam pembuatan page loginnya agar easy saat terkoneksi dengan Middle Api untuk relation ke backendnya. Flow dari aplikasi standart biasanya Login digunakan sebagai first request untuk get oauth dimana response dari oauth digunakan sebagai header untuk request selanjutnya.
Kita memulai dengan pembuatan base interface dari page login tersebut, hal ini digunakan untuk memudahkan dalam proses reading codenya.
class UiLogin extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/bg_plash.png'),
fit: BoxFit.cover)),
child: Column(children: <Widget>[
Expanded(child: loginContent()),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Do't Have Account ? "),
Text("Register", style: TextStyle(fontWeight: FontWeight.bold),)
])),
)
]));
}
}
Kemudian kita buat page loginContent(), pada pembuatannya menggunakan StatefulWidget dikarenakan kita memberikan action pada button login dan dapat di klik kapanpun kita mau.
class loginContent extends StatefulWidget {
@override
_loginContentState createState() => _loginContentState();
}
class _loginContentState extends State<loginContent> {
final TokenBloc _tokenBloc = new TokenBloc();
final usernameController = TextEditingController();
final passwordController = TextEditingController();
bool _isHiddenPassword = true;
@override
void dispose() {
usernameController.dispose();
passwordController.dispose();
super.dispose();
}
@override
void initState() {
_tokenBloc.add(startLoginTokenEvent());
super.initState();
}
void _passwordVisibility() {
setState(() {
_isHiddenPassword = !_isHiddenPassword;
});
}
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: BlocProvider<TokenBloc>(
create: (context) => _tokenBloc,
child: Center(
child: Padding(
padding: EdgeInsets.only(left: 16.0, right: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/ilustrationLogin.png'),
fit: BoxFit.contain))),
),
SizedBox(height: 16),
TextField(
controller: usernameController,
cursorColor: Colors.white,
decoration: new InputDecoration(
labelText: "Email",
suffixIcon: Icon(Icons.email),
labelStyle: TextStyle(color: Colors.white70),
enabledBorder: new UnderlineInputBorder(
borderSide:
new BorderSide(color: Colors.white70)))),
SizedBox(height: 8),
TextField(
controller: passwordController,
obscureText: _isHiddenPassword,
cursorColor: Colors.white,
decoration: new InputDecoration(
labelText: "Password",
suffixIcon: GestureDetector(
onTap: () {
_passwordVisibility();
},
child: Icon(
_isHiddenPassword
? Icons.visibility_off
: Icons.visibility,
),
),
labelStyle: TextStyle(color: Colors.white70),
enabledBorder: new UnderlineInputBorder(
borderSide:
new BorderSide(color: Colors.white70)))),
SizedBox(height: 16),
Container(
height: 45,
width: double.infinity,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
color: Colors.white30,
onPressed: () {
_tokenBloc.add(FetchLoginTokenEvent(usernameController.text, passwordController.text));
},
),
),
SizedBox(height: 12),
Container(
height: 45,
alignment: Alignment.topRight,
child: Text(
"Forget Password",
style: TextStyle(color: Colors.pink),
),
),
MessageLogin()
],
),
),
)));
}
}
MessageLogin() adalah page yang digunakan untuk menfilter response yang terjadi pada aplikasi. Response yang dihasilkan pada process login terdiri dari response success, failed ataupun loading process .
class MessageLogin extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
child: BlocBuilder<TokenBloc, TokenState>(builder: (context, state) {
if (state is TokenLoginLoading) {
return WidgetCircularLoading();
} else if (state is LoginLoaded) {
// Go to main page
print("success")
} else if (state is TokenLoginFailed) {
var messageFailed = state.errorMessage;
return Center(
child: Text('$messageFailed'),
);
} else {
return Container(color: Colors.transparent);
}
}));
}
}
Sedangkan untuk loading process adalah tampilan yang digunakan untuk memberi tahu bahwa page ini sedang dalam proses pengambilan data ke backend, pada pembuatan loading page kita menggunakan ciri khas masing - masing, apabila device berupa android kita menggunakan circularProgressIndicator sedangkan untuk ios kita menggunakan. cupertinoacitivityIndicator. hal ini digunakan agar tidak mengurangi ciri khas kedua device tersebut.
class WidgetCircularLoading extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Platform.isIOS
? CupertinoActivityIndicator()
: CircularProgressIndicator(),
);
}
}
Berikut ini tampilan saat aplikasi dijalankan, untuk process request data ke backend kita bahas pada Login Management Part 2, Terima kasih 😊
Login Management API pada Flutter Part 1
Reviewed by sdiik
on
June 06, 2020
Rating:
Reviewed by sdiik
on
June 06, 2020
Rating:
No comments: