[플러터] 11일차 - 화면 경로 구성하기

 

플러터에서 화면을 이동하는 방법.

각 화면에 라우팅을 붙이고, 이를 사용해 원하는 화면으로 이동한다.

경로는 항상 '/'로 시작한다.

• note_list_page.dart

class NoteListPage extends StatefulWidget {
  
  static const rootName = '/';

  @override
  State createState() => _NoteListPageState();
}

 

• note_edit_page.dart

class NoteEditPage extends StatefulWidget {
  static const rootName = '/edit';
  
  @override
  State createState() => _NoteEditPageState();
}

 

MyApp에는 initialRoute를 추가해야한다. 이제 home은 필요가 없다.

그리고 routes로 화면 경로를 맵칭한다.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Notes',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity
      ),
      initialRoute: NoteListPage.rootName,
      // home: NoteEditPage(),
    );
  }
}

 

 

노트를 확인하고 수정하는 화면 추가하기

 

Route argument class를 하나 추가한다.

• page/note_page_args.dart

import 'package:sticky_notes/data/note.dart';

class NotePageArgs {
  late int index;
  late Note note;

  NotePageArgs(this.index, this.note);
}

 

그리고 노트 수정 페이지 추가

• page/note_view_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sticky_notes/data/note.dart';
import 'package:sticky_notes/page/note_edit_page.dart';
import 'package:sticky_notes/page/note_page_args.dart';
import 'package:sticky_notes/providers.dart';

class NoteViewPage extends StatefulWidget {
  static const rootName = 'view';

  @override
  State<StatefulWidget> createState() => _NodeViewPageState();

}

class _NodeViewPageState extends State<NoteViewPage> {
  @override
  Widget build(BuildContext context) {
    NotePageArgs args = ModalRoute.of(context)!.settings.arguments as NotePageArgs;
    Note note = args.note;

    return Scaffold(
      appBar: AppBar(
        title: Text(note.title.isEmpty ? '{제목 없음}' : note.title),
        actions: [
          IconButton(icon: Icon(Icons.edit), tooltip: '편집', onPressed: () {
            _edit(args);
          },),
          IconButton(icon: Icon(Icons.delete), tooltip: '삭제', onPressed: () {
            _confirmDelete(args);
          },)
        ],
      ),
      body: SizedBox.expand( // 배경생, 스크롤처리를 위해
        child: Container(
          color: note.color,
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 16.0),
            child: Text(note.body),
          ),
        )
      )
    );
  }

  void _edit(NotePageArgs args) {
    Navigator.pushNamed(context, NoteEditPage.rootName, arguments: args);
  }
  
  void _confirmDelete(NotePageArgs args) {
    showDialog(context: context, builder: (context) {
      return AlertDialog(
        title: Text('노트 삭제'),
        content: Text('노트를 삭제할까요?'),
        actions: [
          TextButton(child: Text('아니요'), onPressed: () {
            Navigator.pop(context);
          }, ),
          TextButton(child: Text('예'), onPressed: () {
            noteManager().deleteNote(args.index);
            Navigator.popUntil(context, (route) => route.isFirst);
          },),
        ],
      );
    });
  }
}

 

 

Uploaded by Notion2Tistory v1.1.0