點燈坊

失くすものさえない今が強くなるチャンスよ

建立 Material 風格頁面

Sam Xiao's Avatar 2024-09-03

Material 為 Android 所使用風格，在 Flutter 可以使用 MaterialApp widget 建立之。

Version

Flutter 3.24

Flutter

material01

  • Android 與 iOS 都成功使用 MaterialApp 顯示 Hello World

Main

main.dart

import 'package:flutter/material.dart';

import 'home.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Home());
  }
}
  • 在 main.dart 啟動 app

Line 1

import 'package:flutter/material.dart';
  • 引用 flutter/material.dart 使用 MaterialApp

Line 12

@override
Widget build(BuildContext context) {
  return const MaterialApp(home: Home());
}
  • 建立 MaterialApp widget
    • home：指定首頁

Home

home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}
  • 定義 Home page

Line 1

import 'package:flutter/material.dart';
  • 每個 page 到要引用 flutter/material.dart 使用 MaterialApp

Line 6

@override
Widget build(BuildContext context) {
  return const Scaffold(
    body: Center(
      child: Text('Hello World'),
    ),
  );
}
  • 由 Scaffold widget 建立 MaterialApp 的 頁面結構
    • body：指定 Scaffold 的 內容
  • Center：建立 水平置中 與 垂直置中 的 layout
    • child：指定 Center 的 內容
  • Text：建立 Text widget 顯示內容

Conclusion

  • 當要建立 Material 風格時，除了使用 MaterialApp widget 外，還要透過 Scaffold widget 建立 頁面結構

# Flutter