สร้าง Screen / Page ใหม่
Flutter 3 by Keptcode.com
Repo: Github.com (รบกวนกด Start ให้ด้วยนะคับ)
โครงสร้างโปรเจก (ตัวอย่าง)
Path: [skeleton]\flutter-app
Language: Project Structure
├─── /screen/
│ ├── page01.dart <= สร้างไฟล์
│ ├── page02.dart <= สร้างไฟล์
│ └── page03.dart <= สร้างไฟล์
└── main.dart
สร้างไฟล์: หน้าแรก (Page 01) (ไฟล์ชื่อ page01)
Path: [skeleton]\flutter-app\lib\screen\page01.dart
Language: Dart
import 'package:flutter/material.dart';
import 'package:flutter_app/screen/page02.dart';
class Page01 extends StatelessWidget {
const Page01({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
const Text(
'Page 01',
style: TextStyle(
fontSize: 28,
),
),
const Divider(
height: 10,
color: Colors.transparent,
),
// ## เพิ่มปุ่ม: Next ##
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.amber[600],
),
// ## Event: คลิกปุ่ม ##
onPressed: () {
// ## ไปหน้าถัดไป ##
Navigator.push(
context, MaterialPageRoute(
builder: (context) {
// ## Page02 คือ หน้าถัดไป ##
return const Page02();
}
)
);
},
child: const Text('Go to Page 02'),
),
],
),
),
);
}
}
ไฟล์: page01.dart
รูปภาพตัวอย่าง
สร้าง: หน้า 02 (ไฟล์ชื่อ page02)
Path: [skeleton]\flutter-app\lib\screen\page02.dart
Language: Dart
import 'package:flutter/material.dart';
import 'package:flutter_app/screen/page03.dart';
class Page02 extends StatelessWidget {
const Page02({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
const Text(
'Page 02',
style: TextStyle(
fontSize: 28,
),
),
const Divider(
height: 10,
color: Colors.transparent,
),
// ## เพิ่มปุ่ม: Next ##
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.amber[600],
),
// ## Event: คลิกปุ่ม ##
onPressed: () {
// ## ไปหน้าถัดไป ##
Navigator.push(
context, MaterialPageRoute(
builder: (context) {
// ## Page03 คือ หน้าถัดไป ##
return const Page03();
}
),
);
},
child: const Text('Go to Page 03'),
),
// ## เพิ่มปุ่ม: Back ##
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.amber[600],
),
// ## Event: คลิกปุ่ม ##
onPressed: () {
// ## ย้อนกลับ ##
Navigator.pop(context);
},
child: const Text('Back'),
),
],
),
),
);
}
}
ไฟล์: page02.dart
รูปภาพตัวอย่าง
สร้าง: หน้า 03 (ไฟล์ชื่อ page03)
Path: [skeleton]\flutter-app\lib\screen\page03.dart
Language: Dart
import 'package:flutter/material.dart';
class Page03 extends StatelessWidget {
const Page03({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
const Text(
'Page 03',
style: TextStyle(
fontSize: 28,
),
),
const Divider(
height: 10,
color: Colors.transparent,
),
// ## เพิ่มปุ่ม: Back ##
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.amber[600],
),
// ## Event: คลิกปุ่ม ##
onPressed: () {
// ## ย้อนกลับ ##
Navigator.pop(context);
},
child: const Text('Back'),
),
],
),
),
);
}
}
ไฟล์: page03.dart
รูปภาพตัวอย่าง
แก้ไข: ไฟล์หลัก (ไฟล์ชื่อ main.dart)
Path: [skeleton]\flutter-app\lib\main.dart
Language: Dart
import 'package:flutter/material.dart';
import 'package:flutter_app/screen/page01.dart'; // <= เรียก Page 01 (page01)
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key,
});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
useMaterial3: true,
),
home: const Page01(), // <= เรียก Page 01 (page01)
);
}
}