Flutter menyediakan berbagai widget dasar yang sering digunakan dalam pembuatan antarmuka pengguna. Tiga di antaranya adalah Text, Image, dan Icon. Mari kita bahas satu per satu.
1. Text Widget
`Text` adalah widget yang digunakan untuk menampilkan teks. Widget ini sangat fleksibel dan mendukung berbagai gaya teks.
Contoh Penggunaan:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Contoh Text Widget'),
),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
),
);
} .........
Penjelasan:
- `Text('Hello, Flutter!')`: Menampilkan teks "Hello, Flutter!" di layar.
- `style`: Digunakan untuk mengatur tampilan teks seperti ukuran font, ketebalan, warna, dll.
2. Image Widget
`Image` digunakan untuk menampilkan gambar dalam aplikasi. Ada beberapa cara untuk memuat gambar, seperti dari aset lokal atau URL.
Contoh Penggunaan:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Contoh Image Widget'),
),
body: Center(
child: Image.network(
'https://flutter.dev/images/flutter-logo-sharing.png',
width: 200,
height: 200,
),
),
),
);
}
Penjelasan:
- `Image.network()`: Memuat gambar dari URL.
- `width` dan `height`: Menentukan lebar dan tinggi gambar.
3. Icon Widget
`Icon` digunakan untuk menampilkan ikon yang biasanya digunakan untuk simbol atau tombol.
Contoh Penggunaan:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Contoh Icon Widget'),
),
body: Center(
child: Icon(
Icons.favorite,
color: Colors.red,
size: 50.0,
),
),
),
);
}
Penjelasan:
- `Icons.favorite`: Menampilkan ikon hati.
- `color`: Menentukan warna ikon.
- `size`: Menentukan ukuran ikon.
Kesimpulan
- Text: Untuk menampilkan teks dengan berbagai gaya.
- Image: Untuk menampilkan gambar dari berbagai sumber.
- Icon: Untuk menampilkan ikon yang dapat disesuaikan warna dan ukurannya.
Ketiga widget ini merupakan dasar dalam pembuatan antarmuka pengguna di Flutter dan sering digunakan dalam berbagai kombinasi untuk menciptakan tampilan aplikasi yang menarik.
