Posts

Bismillahirahmanirrahim,

Pada kesempatan ini kita akan membahas tutorial menggunakan Floating Action Button, floating Action Button adalah tombol icon melingkar yang melayang di atas konten untuk mempromosikan tindakan utama  dalam aplikasi. Tombol Floating Action ini umum di gunakan menggunakan Konstruktor Scaffold

Pada halaman main.dart,

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: FloatingAction(),
  debugShowCheckedModeBanner: false,
));

seperti biasa kita akan menggunakan import material, dan arahkan halaman pada home ke class FloatingAction(),

class FloatingAction extends StatefulWidget {
  @override
  _FloatingActionState createState() => _FloatingActionState();
}

class _FloatingActionState extends State<FloatingAction> with SingleTickerProviderStateMixin {

  bool isOpened = false;
  AnimationController _animationController;
  Animation<Color> _buttonColor;
  Animation<double> _animationIcon;
  Animation<double> _translateButton;
  Curve _curve = Curves.easeOut;
  double _fabHeight = 56.0;

selanjutnya kita menggunakan Statefulwidget dengan class FloatingActionState kita butuh widget SingleTickerProviderStateMixin pertama kita akan deklarasi variabel isOpened menggunakan type data boolean dengan nilai false, membuat tipe data String variabel _animationController, _buttonColor, _animationIcon, _translateButton, _curve dan tipe data bilangan Riil double _fabHeight dengan nilai 56.0,

Widget buttonAdd() {
    return Container(
      child: FloatingActionButton(
        onPressed: () {
          print("Button add Click");
        },
        tooltip: "Add",
        child: Icon(Icons.add),
      ),
    );
  }

fungsi widget buttonAdd, akan menampilkan icon add (+) jika buttonnya di klik akan muncul komentar “Button add Click”

Widget buttonEdit() {
    return Container(
      child: FloatingActionButton(
        onPressed: () {
          print("Button Edit Click");
        },
        tooltip: "Edit",
        child: Icon(Icons.edit),
      ),
    );
  }

fungsi widget buttonEdit, akan menampilkan icon edit jika buttonnya di klik akan muncul komentar “Button Edit Click”

Widget buttonDelete() {
    return Container(
      child: FloatingActionButton(
        onPressed: () {
          print("Button Delete Click");
        },
        tooltip: "Delete",
        child: Icon(Icons.delete),
      ),
    );
  }

fungsi widget buttonDelete, akan menampilkan icon delete jika buttonnya di klik akan muncul komentar “Button Delete Click”

Widget buttonToggle() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: _buttonColor.value,
        onPressed: animate,
        tooltip: "Toggle",
        child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _animationIcon,),
      ),
    );
  }

fungsi widget buttonToggle, akan menampilkan menu_close pada saat belum di klik, setelah di klik akan tampil icon dari variable _animationIcon.

void animate() {
    if(!isOpened)
      _animationController.forward();
    else
      _animationController.reverse();
    isOpened = !isOpened;
  }

fungsi animate ini membuat if statement dengan syarat, kalau variabel _animationController forward kondisinya tidak open, kalau reverse kondisinya open.

@override
  void initState() {
    _animationController =
    AnimationController(vsync: this, duration: Duration(milliseconds: 500))
      ..addListener(() {
      setState(() {});
    });

    _animationIcon = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);

    _buttonColor = ColorTween(begin: Colors.blue, end: Colors.red). animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(0.00, 1.00, curve: Curves.linear)
      )
    );

    _translateButton = Tween<double>(begin: _fabHeight, end: -14.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(0.0, 0.75, curve: _curve)
      )
    );
    super.initState();
  }

selanjutnya kita buat method initstate untuk pertama sekali kita menjalankan eksekusi dengan mendefiniskan variabel _animationController, _buttonColor, _animationIcon, _translateButton.

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

fungsi dispose ini untuk menghentikan fungsi dari variabel _animationController.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Floating Action Button"),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Transform(
            transform: Matrix4.translationValues(0.0, _translateButton.value*3.0, 0.0),
            child: buttonAdd(),
          ),
          Transform(
            transform: Matrix4.translationValues(0.0, _translateButton.value*2.0, 0.0),
            child: buttonEdit(),
          ),
          Transform(
            transform: Matrix4.translationValues(0.0, _translateButton.value, 0.0),
            child: buttonDelete(),
          ),
          buttonToggle()
        ],
      ),
    );
  }
}

Finalisasinya kita menggunakan floatingActionButton disini kita menggunakan Column dimana kita manggil widget Transform dengan properties child memanggil widget buttonAdd, buttonEdit, buttonDelete dan buttonToggle,

Kalau sudah selesai semua kita tinggal running emulatornya, selamat mencoba.

Berikut demo tutorialnya

Berikut hasil Screenshoot pada saat running di emulator