Autentikasi Google di Flutter dengan Firebase

Penjelasan Daftar firebase terlebih dahulu menggunakan akun gmail kamu. Setelah berhasil mendaftar, klik “Add Project” untuk membuat proyek baru. Masukkan nama proyek anda. Di bagian menu sebelah kiri, klik Build > Authentication. Lalu klik Get Started. Di bagian provider pilih Google lalu masukkan email yang kalian gunakan, kemudian klik Save. Sebelum kita melanjutkan, kita harus… Continue reading Autentikasi Google di Flutter dengan Firebase

Published
Categorized as Blog

Mengambil Data dari website dengan HTTP GET di Flutter

Permintaan GET digunakan untuk mengekstrak data dari backend untuk digunakan dalam aplikasi. Untuk melakukan permintaan GET dari website dengan Flutter, berikut ini langkahnya. Dapatkan paket dart HTTP Bukan terminal baru lalu ketikkan flutter pub add http. Tambahkan izin mengakses internet di AndroidManifest.xml Kita harus menambahkan izin mengakses internet di AndroidManifest.xml. File ini ada di dalam… Continue reading Mengambil Data dari website dengan HTTP GET di Flutter

Published
Categorized as flutter

Menggunakan Kustom Font di Flutter

Flutter memungkinkan pengembang mengintegrasikan Google Font ke dalam aplikasi Flutter. Selain Google Font, kita juga bisa menggunakan font kustom lain dengan cara menambahkan dan mendeklarasikannya di proyek kita. Sebelum menambahkan font, kita harus tahu jenis format font yang didukung Flutter: Pada tutorial kali ini kita akan mengunduh beberapa font family yaitu Abel, Caveat, Miltonian Tattoo… Continue reading Menggunakan Kustom Font di Flutter

Published
Categorized as flutter

Menyimpan data dengan SQL Lite di Flutter

Halo guys kali ini kita akan belajar bagaimana menggunakan SQL Lite untuk menyimpan data di database dan mengkoneksikannya dengan aplikasi Flutter kita. Untuk tutorial kali ini kita akan menggunakan Visual Studio Code untuk membangun aplikasi ini. BAGIAN I. DATABASE Buat proyek baru di Flutter dengan nama belajar_database, lihat tutorial ini jika anda tidak tahu bagaimana… Continue reading Menyimpan data dengan SQL Lite di Flutter

WP_Post Object ( [ID] => 17 [post_author] => 1 [post_date] => 2024-03-18 10:11:20 [post_date_gmt] => 2024-03-18 10:11:20 [post_content] =>

When you build UI with Flutter and Dart, you build it out of widgets. In this Article let's see simple application and learning about widgets as going.

Video 1. Creating a new Flutter Project

Look in the lib folder and there is a file named "main.dart". We will mostly work on the lib folder.

Figure 1. Main Code
Figure 2. Widget Tree for Main code

The first line is importing Google’s Material Design (line 1).

import 'package:flutter/material.dart'

The main function is responsible for initializing the app and starting the app’s execution. As we can see on the code lines 3 to 5, the argument for this main function is the MainApp class.

void main() {
  runApp(const MainApp());
}

MainApp class is extended from a StatelessWidget class, which means it's a static widget that cannot change over time. The BuildContext is a fundamental concept in Flutter. It's an abstract class in the Flutter framework that represents a handle to the location of a widget in the widget tree. Each widget has its own BuildContext, which becomes the parent of the BuildContext for its child widgets.

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    .........................
  }
}

We can see in Figure 2 above, there is a MaterialApp widget under the class. This means that the application is using Material Design. As the frame, the Scaffold class is used under MaterialApp as home. Scaffold gives you many basic functionalities, like AppBar, BottomNavigationBar, Drawer, FloatingActionButton, etc.

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

You can see inside the scaffold is the body property. This property is the primary content. As the body, there is the Center widget to align all contents centered. Inside the Center widget is the Text widget as a child.

To run the Flutter application you have some choices:

  1. You can click on the bottom left to open the command palette or the top menu then click View > Command Palette or CTRL+SHIFT+P.
  2. Type flutter and then select the Flutter: Select Device. If no devices are running, this command prompts you to enable a device.
  3. Select a target device from "Select Device" prompt.
  4. After you select a target, start the app. Go to Run > Start Debugging or press F5.
  5. Wait for the app to launch. After the build process is complete, the device will show your application
Video 2. Running Flutter application with Android emulator

Code 1

import 'package:flutter/material.dart'

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}
Figure 3. The result of code 1 showed on the Android emulator

You can see the result of the first application in Figure 3. Now we want to add some modifications to the code. We want to remove the debug banner that always shows on the top left by setting debugShowCheckedModeBanner as false. The debugShowCheckedModeBanner is a property of MaterialApp.

We added an AppBar property on the Scaffold, this will show as a top bar. The last modification is changing the background color by adding a background color property on the Scaffold.

Code 2
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color.fromARGB(255, 116, 178, 236),
        appBar: AppBar(title: const Text("Flutter App"),),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}
Figure 4. Code 2 results after hiding the debug banner, adding the top bar, and changing the background color.

Ok guys that's all for a simple application with Flutter and Dart

[post_title] => Building UI with Flutter and Dart [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => building-ui-with-flutter-and-dart [to_ping] => [pinged] => [post_modified] => 2024-06-16 15:27:18 [post_modified_gmt] => 2024-06-16 08:27:18 [post_content_filtered] => [post_parent] => 0 [guid] => https://isengkoding.com/?p=17 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 2 [filter] => raw )