Folder 2, video 7
Kali ini kita melanjutkan tutorialnya , pada Folder 2, video 7. kita akan belajar menambahkan font external pada flutter,
Cari font di http://fonts.google.com/ lalu cari font pilihan kita, di sini saya menggunakan Poppins
Download saja font tersebut, lalu ambil font yang dibutuhkan.
Letakkan pada folder assets/font di flutter (bila belum ada buat dulu folder assets/font)
main.dart
import 'package:flutter/material.dart';
import 'pages/halaman2.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Halaman2(),
);
}
}
halaman2.dart
import 'package:flutter/material.dart';
class Halaman2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Center(
child: Text(
'Ini adalah contoh teks dengan font yang berbeda',
style: TextStyle(
fontFamily: 'Poppins', // Ganti dengan font family yang diinginkan
fontSize: 20.0,
fontWeight: FontWeight.w900,
),
),
),
),
);
}
}
Hasil :
Cara membuat Tab jarak yang sama dua widget, meskipun widget memiliki panjang yang berbeda
Contoh :
Bisa dilihat, widget yang paling kiri memiliki panjang "Widget 1111" dan "Widget" (memiliki panjang yang tidak sama) namun posisi widget di sebelah kanannya, meskipun berbeda baris masih memiliki posisi kiri yang sama. sebelumnya saya kesulitan, heheh. caranya adalah seperti berikut
halaman2.dart :
import 'dart:html';
import 'package:flutter/material.dart';
class Halaman2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Chatty'),
),
body: ListView(
children: [
Container(
alignment: Alignment.center,
color: const Color.fromARGB(255, 163, 185, 203),
child: Column(
children: [
Text("1"),
Text("22"),
Text("333"),
],
),
),
SizedBox(height: 20),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0), // Membulatkan sudut kiri atas
topRight: Radius.circular(20.0), // Membulatkan sudut kanan atas
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
"Widget 1111",
textAlign: TextAlign.left,
),
),
Spacer(),
Expanded(
child: Text(
"A",
textAlign: TextAlign.left,
),
),
Spacer(),
Expanded(
child: Text(
"Widget 2222",
textAlign: TextAlign.left,
),
),
],
),
Row(
children: [
Expanded(
child: Text(
"Widget",
textAlign: TextAlign.left,
),
),
Spacer(),
Expanded(
child: Text(
"A",
textAlign: TextAlign.left,
),
),
Spacer(),
Expanded(
child: Text(
"Widget 2222",
textAlign: TextAlign.left,
),
),
],
),
Text("1"),
Text("22"),
Text("333"),
],
),
),
],
)
),
);
}
}
Kali ini saya sudah selesai membuat kerangka seperti berikut
Dengan code halaman2.dart :
import 'dart:html';
import 'package:flutter/material.dart';
class Halaman2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Chatty'),
),
body: ListView(
children: [
Container(
alignment: Alignment.center,
color: const Color.fromARGB(255, 163, 185, 203),
child: Column(
children: [
Text("1"),
Text("22"),
Text("333"),
],
),
),
SizedBox(height: 20),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0), // Membulatkan sudut kiri atas
topRight: Radius.circular(20.0), // Membulatkan sudut kanan atas
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Friends"),
Row(
children: [
Expanded(
child: Container(
height: 50,
width: 50,
color: Colors.red,
alignment: Alignment.centerLeft,
child: Image.asset('assets/image/lingkaran.png',
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Jonathan"),
Text("Sory you will try"),
],
)
),
Spacer(),
Expanded(
child: Text(
"Now",
textAlign: TextAlign.left,
),
),
],
),
Row(
children: [
Expanded(
child: Text(
"Widget",
textAlign: TextAlign.left,
),
),
Spacer(),
Expanded(
child: Text(
"A",
textAlign: TextAlign.left,
),
),
Spacer(),
Expanded(
child: Text(
"Widget 2222",
textAlign: TextAlign.left,
),
),
],
),
Text("22"),
Text("333"),
],
),
),
],
),
floatingActionButton: Padding(
padding: EdgeInsets.only(bottom: 20), // Memberikan padding 50 dari bawah
child: FloatingActionButton(
onPressed: () {
// Tindakan yang akan dilakukan ketika tombol ditekan
print('Floating Action Button ditekan!');
},
child: Icon(Icons.add), // Icon untuk tombol
backgroundColor: Colors.red, // Warna latar belakang untuk tombol
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // Menempatkan tombol di tengah horizontal
),
);
}
}
