8. Building Multi-Screen Apps（上）152-164

• [ ] 151. Module Summary

• [ ] 152. Module Introduction

Meals App

![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/9a3e3da7-fd9c-4bbb-977b-6a5da64f14e3/8474d19b-8220-407a-abd7-6ee2fff69359/Untitled.png>)

• [ ] 153. Project Setup

  1.使用老師的Resources

  2.安裝Google Font使用

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';

final theme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    brightness: Brightness.dark,
    seedColor: const Color.fromARGB(255, 131, 57, 0),
  ),
  textTheme: GoogleFonts.latoTextTheme(), //**使用Google fonts預設字體**
);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      home: // Todo ...,
    );
  }
}

google_fonts | Flutter package

 ### Depend on it

Run this command:

With Flutter:
 
 
 $flutter pub add google_fonts

• [ ] 154. Using a GridView

  1.建立lib/categories.dart

  2.GridView

  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,  //横轴子元素的数量。此属性值确定后子元素在横轴的长度就确定了，即ViewPort横轴长度除以crossAxisCount的商。
            childAspectRatio: 3 / 2, //子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。
            crossAxisSpacing: 20, //横轴方向子元素的间距。
            mainAxisSpacing: 20, //主轴方向的间距。
  

  3.先新增Text看是否排列如預期