Belajar Flutter - Membuat Animasi Transisi saat Berpindah Halaman
Jurnalcode.com

Belajar Flutter - Membuat Animasi Transisi saat Berpindah Halaman


Jurnalcode : Kali ini kita Lanjut lagi Tutorial Flutter ,  Tips singkat ini mungkin dibutuhkan saat pembuatan aplikasi nah tips nya adalah bagaimana cara membuat Animasi Transisi saat Berpindah Halaman . Bagi yang suka mengurusi UI ini merupakan hal yang paling di utamakan karena membuat user semakin betah dalam menggunakan aplikasi yang kita buat .

Baiklah langsung saja kalian Buka VSCode  dan silahkan tuliskan code berikut di main.dart

import 'package:flutter/material.dart';
main(List<String> args) {
  runApp(MaterialApp( 
    home: HalamanUtama(),
  ));
}
class HalamanUtama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jurnalcode page Transition'),
      ),
      body: Center( 
        child: RaisedButton( 
          child: Text('Mulai'),
          onPressed: (){
            Navigator.of(context).push(_buatRoute());
          },
        ),
      ),
      
    );
  }
}

Route _buatRoute(){
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => HalamanDua(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

class HalamanDua extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Halaman Dua '),
      ),
    );
  }
}

 

Nah jika sudah silahkan Jalan kan Aplikasi Jika berhasil maka tampilan nya akan seperti dibawah ini jika kalian tekan tombol mulai maka akan terlihat transisi yang lembut .. Silahkan Mencoba

 

.

Ayo Komentar