MaterialApp 建立 Material 風格頁面 | 點燈坊

MaterialApp 可建立 Android 風格頁面。

Version

Flutter 3.24

Flutter

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

MaterialApp

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('MaterialApp'),
    );

    var body = const Center(
      child: Text('Hello World'),
    );

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 1

import 'package:flutter/material.dart';

• 每個 MaterialApp 到要引用 flutter/material.dart

Line 6

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: appBar,
    body: body,
  );
}

• Scaffold：建立 MaterialApp 的 頁面結構
  • appBar：MaterialApp 的 頂部
  • body：MaterialApp 的 下半部

Line 8

var appBar = AppBar(
  title: const Text('MaterialApp'),
);

• AppBar：建立 appBar

Line 12

var body = const Center(
  child: Text('Hello World'),
);

• Center：建立 body，其內部 widget 將 垂直水平置中

Conclusion

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