Kali ini saya belajar tentang route, membuat tombol untuk berpindah halaman dengan route
Untuk screenshootnya adalah seperti berikut :
Untuk struktur filenya seperti berikut :
import 'package:flutter/material.dart';
import 'pages/halaman1.dart';
import 'pages/halaman2.dart';
import 'pages/halaman3.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => Halaman1(),
'/halaman1': (context) => Halaman1(),
'/halaman2': (context) => Halaman2(),
'/halaman3': (context) => Halaman3(),
},
);
}
}
halaman1.dart :
import 'package:flutter/material.dart';
import 'halaman1.dart';
import 'halaman2.dart';
import 'halaman3.dart';
class Halaman1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman 1'),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
// Navigasi ke halaman 1 saat tombol ditekan
Navigator.pushNamed(context, '/halaman2');
},
child: Text('Pindah ke Halaman 2'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Navigasi ke halaman 1 saat tombol ditekan
Navigator.pushNamed(context, '/halaman3');
},
child: Text('Pindah ke Halaman 3'),
),
],
),
);
}
}
halaman2.dart :
import 'package:flutter/material.dart';
import 'halaman1.dart';
import 'halaman2.dart';
import 'halaman3.dart';
class Halaman2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman 2'),
),
body: Center(
child: Text(
'Hello, world!',
style: TextStyle(fontSize: 24.0),
),
),
);
}
}
halaman3.dart :
import 'package:flutter/material.dart';
import 'halaman1.dart';
import 'halaman2.dart';
import 'halaman3.dart';
class Halaman3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman 3'),
),
body: Center(
child: Text(
'Hello, world!',
style: TextStyle(fontSize: 24.0),
),
),
);
}
}
