code dart flutter layout responsif dan navigasi
Hai gaes! 👋
Gue mau share sedikit hasil ngulik gue pake Flutter & Dart. Awalnya iseng-iseng doang, tapi eh kok malah jadi aplikasi beneran 😆.
Di postingan ini gue bakal tunjukin gimana gue ngebuat project ini dari awal, beserta cuplikan kodenya yang (semoga) bisa bantu kalian juga yang lagi belajar atau cari inspirasi buat ngoding.
Buat yang belum terlalu familiar, Flutter itu framework dari Google yang kece banget buat bikin aplikasi cross-platform (Android & iOS), dan bahasa yang dipake tuh Dart. Seru banget buat dipelajarin, apalagi kalo udah liat hasilnya 👀.
Langsung aja yuk, scroll ke bawah buat liat kodenya!
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Zapp Run Layout Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
void _onBottomNavTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Widget _buildLayoutExample(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
Container(
color: Colors.amber,
height: 100,
child: Center(child: Text('Column - Header')),
),
Row(
children: [
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
child: Center(child: Text('Left')),
),
),
Flexible(
flex: 2,
child: Container(
height: 100,
color: Colors.green,
child: Center(child: Text('Center')),
),
),
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.blue,
child: Center(child: Text('Right')),
),
),
],
),
Expanded(
child: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => SecondPage()),
);
},
child: Text('Go to Second Page'),
),
),
)
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Layout & Navigation Demo'),
),
body: _buildLayoutExample(context),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onBottomNavTapped,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: Text(
'This is the second page!',
style: TextStyle(fontSize: 24),
),
),
);
}
}
buat kalian yang mau liat hasil nya bisi klik link di bawah 👇🏻 yaa
https://z51li069451lj.zapp.page/#/
Komentar
Posting Komentar