Flutter – Andamio Menggunakan. Pada kesempatan ini kita akan belajar… | de STREET CODERS | Noviembre de 2020

Pada kesempatan ini kita akan belajar tentang Andamio. Mari kita buat terlebih dahulu project Flutter yang baru de Android Studio. Proyecto Untuk membuat, Anda bisa melihatnya de catatan saya sebelumnya de sini.

Archivo buka main.dart dan ganti kodenya menjadi kode berikut:

import 'package:flutter/material.dart';

main() => runApp(AppBelajarScaffold());

class AppBelajarScaffold extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Belajar Scaffold'),
),
body: Center(
child: Text('Halo Scaffold'),
),
drawer: Drawer(
child: Center(
child: Text('Ini adalah Drawer'),
),
),
)

);
}
}

Jika kita jalankan, hasilnya akan terlihat seperti gambar berikut:

Andamio de Penggunaan

Jika kita klik icono hamburger por pojok kiri atas, maka akan muncul drawer seperti pada gambar berikut:

Cajón de menú

Pada catatan sebelumnya setelah MaterialApp biasanya kita menggunakan Material.

Perhatikan pada bagian berikut:

MaterialApp(
home: Scaffold(
// ...
)
);

home tidak selalu wireobtenerMaterial. Pada kode tersebut, kita mengisi inicio dengan Scaffold. Scaffold Menyediakan fungsionalitas dasar yang sering digunakan pada tampilan de layar seperti AppBar, Body dan Drawer.

Perhatikan bagian berikut:

appBar: AppBar(
title: Text('Belajar Scaffold'),
),

Kode tersebut akan membuat judul por bagian atas layar.

Perhatikan bagian berikut:

body: Center(
child: Text('Halo Scaffold'),
),

Kode tersebut akan membuat body de layar.

Perhatikan bagian berikut:

drawer: Drawer(
child: Center(
child: Text('Ini adalah Drawer'),
),
),

Kode le da acceso a un cajón en el menú de miembros.

Sehingga secara keseluruhan appBar, body dan drawer akan membentuk satu tampilan utuh de layar:

Andamio revoloteando

Elevación y brillo

Coba kita tambahkan elevación sebesar 100:

appBar: AppBar(
title: Text('Belajar Scaffold'),
elevation: 100,
),

Hasilnya akan terlihat seperti ada bayangan:

Elevación Penggunaan

Sekarang coba kita ganti warna icon por bagian atas menjadi dark dengan memberikan nilai brillo adalah light:

appBar: AppBar(
title: Text('Belajar Scaffold'),
elevation: 100,
brightness: Brightness.light,
),

Hasilnya warna icon menjadi dark:

Brillo luz

Perhatikan bagian berikut:

elevation: 100,

Nilai 100 pada kode tersebut memiliki satuan dps (píxeles independientes de la densidad – 100dps). Intinya, layar apapun yang ada por usuario de teléfono inteligente, satu dp bernilai 1/160 pulgadas, sehingga elevación 100 memiliki arti 100/160 pulgadas atau lebih dikenal 5/8 pulgadas.

Perhatikan bagian berikut:

brightness: Brightness.light,

Kode tersebut memberi tahu Flutter untuk mengubah AppBar menjadi light sehingga icon pada bagian atas menjadi dark.

Brightness.light merupakan enum pada Dart.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *