[筆記] Flutter 初探 – Dart 語法上手 IX @地瓜大的飛翔旅程

章節連結

近期初學 Flutter 開發時，發現 Dart 這套語法會需要一點時間適應。若你有寫過 JAVA 的上手速度會快很多。這邊筆記下一些提點供日後自己回想用。

內容

1. 在 main.dart 的 AppEntryPoint 可以新增 route 來指定要載入的內容
2. 別忘記設計 initialRoute 來指定預設頁面

	// flutter core package
	import 'package:flutter/material.dart';

	class HomeScreen extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	/**
	* 最高層 Widget 為 Scaffold
	* 第一層的寬高在此設定
	* 第一層的 Container 可要求第二層的排列位置
	*/
	body: Container(
	alignment: Alignment.center,
	width: 500,
	height: 500,
	margin: EdgeInsets.all(20.0),
	color: Colors.blue,
	child: Container(
	/**
	* 第二層的寬高在此設定
	* 第二層的 Container 可要求第三層的排列位置
	*/
	alignment: Alignment.bottomRight,
	width: 200,
	height: 200,
	margin: EdgeInsets.all(20.0),
	color: Colors.red,
	child: Container(
	width: 100,
	height: 100,
	margin: EdgeInsets.all(20.0),
	color: Colors.black,
	)),
	),
	);
	}

by GitHub

	import 'package:flutter/material.dart';
	import './home_screen.dart';
	import './second_screen.dart';

	class AppEntryPoint extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	routes: {
	"/": (BuildContext context) => HomeScreen(),
	"/second": (BuildContext context) => SecondScreen(),
	},
	initialRoute: "/",
	);
	}
	}

	void main() {
	runApp(AppEntryPoint());
	}

view raw main.dart hosted with

by GitHub

	// flutter core package
	import 'package:flutter/material.dart';

	class SecondScreen extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: Text("第二頁面"),
	);
	}
	}

by GitHub