96. Module Intorduction

• Using Modals, Dialogs & More

• Basic User Input Handling

• Configureing & Using App Themes

• Create a new project named expense_tracker

  

• 使用課件的main.dart複製到專案中的lib/main.dart

• 新建expenses.dart file 用來建立主程式的介面, 有三個主要區塊

  • Chart
  • List of expense
  • Have a tool bar at Top of screen
  • • Button to add new expense

97. Starting Setup & Repetition Time!

• main.dart

import 'package:flutter/material.dart';

import 'package:expense_tracker/expenses.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Expenses(),
    ),
  );
}

• expenses.dart

import 'package:flutter/material.dart';

//TODO: 97. 1.這裡要使用StatfulWidget用來刷新新增費用後回到主介面的費用狀態更新
class Expenses extends StatefulWidget {
  //建立constructor function
  const Expenses({super.key});

  @override
  State<StatefulWidget> createState() {
    // TODO: 97. 2. implement createState, return _Expenses 物件
    return _ExpenseState();
  }
}

// TODO: 97. 4. State 物件要轉型成Expense物件
class _ExpenseState extends State<Expenses> {
  @override
  // TODO: 97. 3. implement build
  Widget build(BuildContext context) {
    // TODO: 97. 4. 新建Scaffold小部件作為版型框架
    return Scaffold(
        body: Column(
      children: const [
        Text('The Chart'),
        Text('Expenses List...'),
      ],
    ));
  }
}