Kali ini saya sedang belajar melakukan slicing pada aplikasi Flutter. Kurang lebih seperti berikut :
import 'package:flutter/material.dart';
class Halaman1 extends StatefulWidget {
@override
_Halaman1 createState() => _Halaman1();
}
class _Halaman1 extends State<Halaman1> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
print(index);
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(
18, 18, 18, 0), // Margin kiri 18, kanan 18, atas 18
child: Row(
children: [
Icon(
Icons
.favorite, // Jenis ikon yang digunakan (dalam contoh ini adalah ikon love)
color: Colors.red, // Warna ikon
size: 30, // Ukuran ikon
),
Spacer(),
Text("B"),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 18, 18, 0), // M
child: Container(
height: 150, // Tinggi
width: double.infinity, // Lebar memenuhi layar
padding: EdgeInsets.all(16), // Padding di dalam Container
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10), // Sudut rounded dengan radius 10
gradient: LinearGradient(
colors: [
Colors.orange,
Colors.red
], // Warna gradasi dari oranye ke merah
begin: Alignment.topLeft, // Posisi awal gradasi
end: Alignment.bottomRight, // Posisi akhir gradasi
),
),
child: Column(
children: [
Text("11"),
Text("22"),
Text("33"),
Spacer(),
Text("33"),
],
),
)),
Padding(
padding: EdgeInsets.fromLTRB(18, 18, 18, 0), //
child: Row(
mainAxisAlignment: MainAxisAlignment
.spaceEvenly, // Memusatkan dan memberikan ruang yang sama di sekitar widget
children: [
Expanded(
child: Container(
height: 150, // Tinggi Container
margin:
EdgeInsets.all(4.0), // Margin di sekitar Container
padding:
EdgeInsets.all(8.0), // Padding di dalam Container
decoration: BoxDecoration(
color: Colors.blue, // Warna latar belakang Container
borderRadius: BorderRadius.circular(
20), // Sudut rounded dengan radius 20
),
child: Text(
'Container 1',
style: TextStyle(color: Colors.white), // Warna teks
),
),
),
Expanded(
child: Container(
height: 150, // Tinggi Container
margin:
EdgeInsets.all(4.0), // Margin di sekitar Container
padding:
EdgeInsets.all(8.0), // Padding di dalam Container
decoration: BoxDecoration(
color: Colors.blue, // Warna latar belakang Container
borderRadius: BorderRadius.circular(
20), // Sudut rounded dengan radius 20
),
child: Text(
'Container 2',
style: TextStyle(color: Colors.white), // Warna teks
),
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 18, 18, 0), //
child: Container(
height: 150, // Tinggi Container
margin: EdgeInsets.all(8.0), // Margin di sekitar Container
padding: EdgeInsets.all(8.0), // Padding di dalam Container
decoration: BoxDecoration(
color: Colors.transparent, // Warna latar belakang transparan
borderRadius: BorderRadius.circular(
20), // Sudut rounded dengan radius 20
border: Border.all(
color: Colors.brown, // Warna border coklat
),
),
child: Center(
child: Text(
'Transparent Container',
style: TextStyle(color: Colors.black),
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 18, 18, 0), //
child: Container(
height: 150, // Tinggi Container
margin: EdgeInsets.all(8.0), // Margin di sekitar Container
padding: EdgeInsets.all(8.0), // Padding di dalam Container
decoration: BoxDecoration(
color: Colors.transparent, // Warna latar belakang transparan
borderRadius: BorderRadius.circular(
20), // Sudut rounded dengan radius 20
border: Border.all(
color: Colors.brown, // Warna border coklat
),
),
child: Center(
child: Text(
'Transparent Container',
style: TextStyle(color: Colors.black),
),
),
),
),
],
)),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
