Posts

Assalammualaikum warahmatullahi wabarakatuu…

Hai sahabat Udacoding, kali ini kita akan membahas tentang cara membuat login animation agar tampilan login kalian lebih cantik dan menarik. So, check it out yaa !!!

Pada file login.dart tambahkan codingan berikut. Berikut merupakan codingan utama dan StatefulWidget LoginPage

import 'package:animasi_builder/loginAnimation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() => runApp(MaterialApp(
      home: LoginPage(),
      title: 'Login Animation',
      debugShowCheckedModeBanner: false,
    ));

class LoginPage extends StatefulWidget {
  const LoginPage({Key key}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

Kemudian tambahkan controller pada _LoginPageState

class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
  var statusClick = 0;
  String msg = '';

  TextEditingController editingControllerUser;
  TextEditingController editingControllerPass;

  AnimationController animationControllerButton;

Tambahkan codingan fungsi initstate() seperti berikut

@override
void initState() {
  editingControllerUser = new TextEditingController(text: '');
  editingControllerPass = new TextEditingController(text: '');

  // TODO: implement initState
  super.initState();
  animationControllerButton =
      AnimationController(duration: Duration(seconds: 3), vsync: this)
        ..addStatusListener((status) {
          if (status == AnimationStatus.dismissed) {
            setState(() {
              statusClick = 0;
              msg = "Username or Password incorrect";
            });
          }
        });
}

Tambahkan fungsi dispose() untuk animationControllerButton

@override
void dispose() {
  // TODO: implement dispose
  super.dispose();
  animationControllerButton.dispose();
}

Kemudian tambahkan kodingan future untuk fungsi _playAnimation()

Future<Null> _playAnimation() async {
  await animationControllerButton.forward();
}

Pada return Scaffold tambahkan codingan berikut.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('images/bg.jpg'), fit: BoxFit.cover)),
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [
                Color.fromRGBO(162, 146, 199, 0.8),
                Color.fromRGBO(51, 51, 63, 0.9),
              ],
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter)),
          child: ListView(
            padding: const EdgeInsets.all(0.0),
            children: <Widget>[
              Stack(
                alignment: AlignmentDirectional.bottomCenter,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 270.0),
                      ),
                      Container(
                        padding: const EdgeInsets.all(10.0),
                        child: Container(
                          child: Column(
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.all(10.0),
                              ),
                              TextField(
                                controller: editingControllerUser,
                                decoration: InputDecoration(
                                  icon: Icon(
                                    Icons.person_outline,
                                    color: Colors.white,
                                  ),
                                  hintText: 'Username',
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(10.0),
                              ),
                              TextField(
                                controller: editingControllerPass,
                                decoration: InputDecoration(
                                  icon: Icon(
                                    Icons.lock_outline,
                                    color: Colors.white,
                                  ),
                                  hintText: 'Password',
                                ),
                              ),
                              Text(
                                msg,
                                style: TextStyle(
                                    color: Colors.yellow, fontSize: 18.0),
                              ),
                              FlatButton(
                                padding: const EdgeInsets.only(
                                    top: 202.0, bottom: 30.0),
                                onPressed: null,
                                child: Text(
                                  "Don't have an account?  Sign Up here",
                                  style: TextStyle(
                                      fontSize: 12.0,
                                      color: Colors.white,
                                      fontWeight: FontWeight.w300,
                                      letterSpacing: 0.5),
                                ),
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                  statusClick == 0
                      ? InkWell(
                          onTap: () {
                            setState(() {
                              statusClick = 1;
                            });
                            _playAnimation();
                          },
                          child: new SignIn())
                      : new StarAnimation(
                          buttonController: animationControllerButton.view,
                          user: editingControllerUser.text,
                          pass: editingControllerPass.text,
                        )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Kemudian tambahkan  class Sign In dibawah Scaffold

class SignIn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(60.0),
      child: Container(
        alignment: FractionalOffset.center,
        width: 320.0,
        height: 60.0,
        decoration: BoxDecoration(
            color: Colors.red[700],
            borderRadius: BorderRadius.all(const Radius.circular(30.0))),
        child: Text(
          'Sign In',
          style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.w300,
              letterSpacing: 0.5),
        ),
      ),
    );
  }
}

Kemudian buat file baru dengan nama loginAnimation.dart. berikut kodingannya

import 'package:animasi_builder/home.dart';
import 'package:flutter/material.dart';

class StarAnimation extends StatefulWidget {
  StarAnimation({Key key, this.buttonController, this.user, this.pass})
      : shrinkButtonAnimation = new Tween(begin: 320.0, end: 70.0).animate(
          CurvedAnimation(
              parent: buttonController, curve: Interval(0.0, 0.150)),
        ),
        zoomAnimation =
            new Tween(begin: 70.0, end: 900.0).animate(CurvedAnimation(
                parent: buttonController,
                curve: Interval(
                  0.550,
                  0.999,
                  curve: Curves.bounceInOut,
                ))),
        super(key: key);

  final AnimationController buttonController;
  final Animation shrinkButtonAnimation;
  final Animation zoomAnimation;

  final String user;
  final String pass;

  Widget _buildAnimation(BuildContext context, Widget child) {
    return Padding(
        padding: const EdgeInsets.only(bottom: 60.0),
        child: zoomAnimation.value <= 300
            ? Container(
                alignment: FractionalOffset.center,
                width: shrinkButtonAnimation.value,
                height: 60.0,
                decoration: BoxDecoration(
                    color: Colors.red[700],
                    borderRadius:
                        BorderRadius.all(const Radius.circular(30.0))),
                child: shrinkButtonAnimation.value > 75
                    ? Text(
                        'Sign In',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.w300,
                            letterSpacing: 0.3),
                      )
                    : CircularProgressIndicator(
                        strokeWidth: 1.0,
                        valueColor:
                            AlwaysStoppedAnimation<Color>(Colors.white)),
              )
            : user == 'oya'
                ? Container(
                    width: zoomAnimation.value,
                    height: zoomAnimation.value,
                    decoration: BoxDecoration(
                        shape: zoomAnimation.value < 600
                            ? BoxShape.circle
                            : BoxShape.rectangle,
                        color: Colors.red[700]),
                  )
                : Container(
                    alignment: FractionalOffset.center,
                    width: shrinkButtonAnimation.value,
                    height: 60.0,
                    decoration: BoxDecoration(
                        color: Colors.red[700],
                        borderRadius:
                            BorderRadius.all(const Radius.circular(30.0))),
                    child: shrinkButtonAnimation.value > 75
                        ? Text(
                            'Sign In',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.w300,
                                letterSpacing: 0.3),
                          )
                        : CircularProgressIndicator(
                            strokeWidth: 1.0,
                            valueColor:
                                AlwaysStoppedAnimation<Color>(Colors.white)),
                  ));
  }

  @override
  _StarAnimationState createState() => _StarAnimationState();
}

class _StarAnimationState extends State<StarAnimation> {
  @override
  Widget build(BuildContext context) {
    widget.buttonController.addListener(() {
      if (widget.zoomAnimation.isCompleted) {
        if (widget.user == 'oya') {
          Navigator.of(context).push(
              MaterialPageRoute(builder: (BuildContext context) => Home()));
        }}
    });
    return new AnimatedBuilder(
        animation: widget.buttonController, builder: widget._buildAnimation);
  }
}