X
Showing posts with label flutter. Show all posts
Showing posts with label flutter. Show all posts

Saturday, April 15, 2023

Flutter : Membuat Splash Screen

 1. main.dart 



    import 'package:first_app/bloc/user_bloc.dart';
    import 'package:first_app/ui/splash_screen/splash_screen.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SplashScreen(),
        );
      }
    }

2. splash_screen.dart

    import 'dart:async';

import 'package:first_app/ui/main_page.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
@override
_SplashScreen createState() => _SplashScreen();
}

class _SplashScreen extends State<SplashScreen> {
@override
void initState(){
super.initState();
Timer(Duration(seconds: 1),
() => Navigator.pushReplacement(context, MaterialPageRoute(builder:(context)=> MainPage())));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: null,
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
"URL_IMAGE",
fit: BoxFit.contain,
alignment: Alignment.center,
)
],
)
),
);
}
}

3. main_page.dart

    import 'package:first_app/bloc/user_bloc.dart';
import 'package:first_app/model/user.dart';
import 'package:first_app/ui/user_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(backgroundColor: Colors.blue[400],
title: Text("App Baru"),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget> [
TextButton(
style: TextButton.styleFrom(
primary: Colors.blue,
),
onPressed: () { },
child: Text('Submit'),
),
BlocBuilder<UserBloc, User>(builder: (context, user) => UserCard(user))

],
),
);
}
}

Wednesday, March 17, 2021

Membuat Aplikasi Pertama dengan Flutter di Android Studio

 


Pada tutorial Flutter kali ini kita akan membuat aplikasi pertama dengan menggunakan editor Android Studio.

Langsung saja tanpa basa basi silahkan ikuti langkah dibawah ini :

1. Pilih Start a new Flutter project pada jendela awal Android Studio.





2. Pada jendela selanjutnya pilih Flutter Application





3. Isi Project name dengan "hello_world" (nama project tidak boleh menggunakan spasi dan huruf capital), serta jangan lupa atur Flutter SDK path berdasarkan folder tempat sdk flutter kalian berada, terakhir atur Project location yaitu lokasi untuk menyimpan project.





4. Atur Company domain kemudian klik finish





Tunggu beberapa saat, project flutter akan di buat. 


5. Apabila telah muncul tampilan seperti gambar di bawah dan tidak ada notifikasi eror maka project berhasil dibuat.





6. Klik icon Run untuk menjalankan aplikasi di emulator atau langsung ke hp.