오공완 (with Do it! 플러터 앱 프로그램밍) #8_1

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

   내비게이션 이해하기

책에서는 한 단계 거쳐서 설명을 했는데, 오늘도 역시나 코트타자연습으로 하는 바람에 너무도 간단하게 끝나 버렸다.

화면이 스택구조로 쌓이게 된다는 부분이 신기하다. 그럼, 계속 메모리를 잡고 있을 것만 같은데..

가벼운 구조니깐 그렇겠지? 다르게 생각하면 다른 화면 잠깐 갔다가 왔는데 초기화되어 있으면 그것도 짜증 날 것 같다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Widget Example';

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme:
        ThemeData(brightness: Brightness.dark, primarySwatch: Colors.blue),
      initialRoute: '/',
      routes: {
        '/': (context) => const FirstPage(),
        '/second': (context) => const SecondPage()
      },
    );
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({super.key});

  @override
  State<StatefulWidget> createState() => _FirstPage();
}

class _FirstPage extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sub Page Main'),
      ),
      body: const Center(
        child: Text('첫 번째 페이지'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).pushNamed('/second');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            Navigator.of(context).pop();
          },
          child: const Text('돌아가기'),
        ),
      ),
    );
  }
}

ㅊ

ㅁㅇ

책을 보면서 천천히 하고 싶어도 책이 버전이 맞지 않아서..

8_2강은 책대로 천천히 해 보자.

 

책대로 입력하고 있는데 아래부분에서 오류가 발생한다. 깃허브 코드를 보니 여기에 const가 앞에 붙어 있다.

initialRoute: '/',
  routes: {
  '/'; (context)=>SubDetail(),
  '/second': (context) => SecondDetail(),

 

그리고 깃허브 코드에는 'package:~~'걸 붙여 놓은 곳도 있고, 아닌 곳도 있다. 난 그냥 안 붙여봤는데, 작동을 한다.

import 'subDetail.dart';
import 'secondDetail.dart';

 

그래서 완성된 main.dart

import 'package:flutter/material.dart';
import 'subDetail.dart';
import 'secondDetail.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Widget Example';

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue
      ),
      initialRoute: '/',
      routes: {
        '/': (context)=> const SubDetail(),
        '/second': (context) => const SecondDetail(),
        },
    );
  }
}

그리고 두번째 페이지에서 첫 번째 페이지로 돌아가기 버튼을 누르면 화면이 검게 변했다가 오류코드가 뜬다.

import 'package:flutter/material.dart';

class SubDetail extends StatefulWidget {
  const SubDetail({super.key});

  @override
  State<SubDetail> createState() => _SubDetailState();
}

class _SubDetailState extends State<SubDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sub Detail Example'),
      ),
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: (){
              Navigator.of(context).pushReplacementNamed('/second');
            },
            child: Text('두 번째 페이지로 이동하기'),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class SubDetail extends StatefulWidget {
  const SubDetail({super.key});

  @override
  State<SubDetail> createState() => _SubDetailState();
}

class _SubDetailState extends State<SubDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sub Detail Example'),
      ),
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: (){
              Navigator.of(context).pushReplacementNamed('/second');
            },
            child: Text('두 번째 페이지로 이동하기'),
          ),
        ),
      ),
    );
  }
}

그리고 이건 subDetail 다트 코드인데, 여기서 보면 pushReplacementNamed()함수가 들어 있다. 이건 스택 구조로 쌓아두는 것이 아닌 대체한다는 의미란다. 처음에 가졌던 의문에 대한 답일 수 있겠다.

이 함수를 수정하고 세번째 페이지까지 만들었다. 그리고 세 번째 페이지에 할 일 보기 기능 만들기를 추가했다.

기타 몇 개 코드를 수정해서 완성했다.

'system UI isn't responding' 메세지가 떴는데, 에뮬레이터 앱을 종료시키고 다시 실행시켰더니 잘 작동했다.

새로운 리스트를 추가했더니 또 같은 메세지가 

 

 

그래도 뜨기에, 디바이스 데이터를 지워줬더니 괜찮아졌다. 

'Wipe Data' - 공장 초기화인가?^^;;

마지막 내용으로 용량이 큰 이미지나 동영상 데이터를 주고받을 때 메모리를 많이 차지해서 성능이 떨어진다고.. 

내가 그리 많은 메모리를 사용했나?

아님 PC가 구려서 그런건가..

 

오늘도 뿌듯하게 공부 끄읏~