1. 데이터 기본 처리 구현 CRUD

Create Read Update Delete

2. 이전에 사용했던 StatefulWidget의 setState만을 사용해서는 서로다른 페이지 는 갱신이 어려움 방법이 없지는 않음 > 부모위제세서 자녀위젯으로 계속 넘겨주면 가능한대 앱 사이즈가 커질수록 코드가 너무 많아져 복잡해지는 단점이 있음

> 그 이유는 자기 페이지에서만 가능함

> 그래서 사용하는것이 상태관리 패키지를 사용함 State Management란 즉, 최신상태의 데이터를 보여주도록 페이지 간 데이터를 주고받고 관리하는 행위

데이터를 일괄 관리하는 서비스(클래스)에 지정해서 여러개의 위젯들이 카트에서 가져다 편하게 사용하는 방법

예) MyAppBar에서 상태관리 패키지 미 사용 시에는 MyCart -> MyApp -> MyCatalog -> MyAppbar 이렇게 처리가 됨

MyApp

MyCatalog MyCart

MyAppBar MyListitem ** MyListitem

       MyListitem

• Consume 코드를 감쌓아야함 그래야 별도에 상태관리 서비스가 사용가능함

Consumeer : 화면을 새로 그려야할 때 > 계속 새로고침 > 무거움 context.read : 화면을 새로 그리지 않을 떄(1회성으로 변수에 접근할 때) > 가벼움

Extract Method : 함수로 따로 선언해서 코드 리팩토링에 사용

앱을 재시작하면 휘발성 메모리에 저장되어 재시작하면 삭제된다 > 즉 어플 종료할 때마다 사라짐

방법

1. 기기에 파일로 저장 : shared_preferences
2. 기기 DB 저장 : sqflite 패키지 사용
3. 다른 컴퓨터(서버)에 저장 : 인터넷을 통해 다른 컴퓨터 또는 서버에 전송 저장 방식

• 1번에 해당하는 방법으로 진행

shared_preferences패키지는 String, List, int, double, bool 타입만 저장이 가능

• await 함수 사용하기위해선 async()함수를 사용해야함

• data를 저장/로드 하는 로직 추가함

  saveMemoList() { List memoJsonList = memoList.map((memo) => memo.toJson()).toList(); // [{"content": "1"}, {"content": "2"}]

  String jsonString = jsonEncode(memoJsonList); // '[{"content": "1"}, {"content": "2"}]'

  prefs.setString('memoList', jsonString); }

  loadMemoList() { String? jsonString = prefs.getString('memoList'); // '[{"content": "1"}, {"content": "2"}]'

  if (jsonString == null) return; // null 이면 로드하지 않음

  List memoJsonList = jsonDecode(jsonString); // [{"content": "1"}, {"content": "2"}]

  memoList = memoJsonList.map((json) => Memo.fromJson(json)).toList(); }

작동 방식은 다음과 같습니다.TabBarView

위젯은 위젯의 컨텐츠 또는 탭과 컨텐츠 보기를 동기화하기 위해 제공하는 위젯으로 배치되어야 합니다.TabBarViewDefaultTabControllerTabController

는 자식 목록을 가져오며, 여기서 각 자식은 특정 탭의 콘텐츠를 나타냅니다. 자식의 순서는 에 있는 해당 탭의 순서와 일치해야 합니다.TabBarViewWidgetTabBar

사용자가 에서 탭을 선택하면 에서 자동으로 애니메이션을 적용하고 해당 콘텐츠 보기를 표시합니다.TabBarTabBarView

의 콘텐츠 보기는 , , , 또는 사용자 지정 위젯과 같은 모든 종류의 위젯이 될 수 있습니다.TabBarViewContainerListViewGridView

lazily는 자식을 빌드하는데, 이는 현재 표시되는 콘텐츠 보기와 바로 인접한 이웃만 위젯 트리에서 빌드되고 유지 관리됨을 의미합니다. 이렇게 하면 메모리 사용량과 빌드 시간이 줄어들어 성능이 향상됩니다.TabBarView

탭 및 콘텐츠 보기의 수가 많거나 동적인 경우 의 속성을 사용하여 사용자가 탭 사이를 스크롤할 때 요청 시 콘텐츠 보기를 빌드할 수 있습니다.childrenTabBarView.builder()

다음은 사용 예입니다.TabBarView

DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Text('Tabbed App'), bottom: TabBar( tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], ), ), body: TabBarView( children: [ Container( color: Colors.red, child: Center(child: Text('Content for Tab 1')), ), Container( color: Colors.green, child: Center(child: Text('Content for Tab 2')), ), Container( color: Colors.blue, child: Center(child: Text('Content for Tab 3')), ), ], ), ), ) 이 예제에는 배경색이 다른 세 개의 위젯이 포함되어 있으며 각 위젯은 특정 탭에 대한 콘텐츠를 표시합니다. 콘텐츠 보기는 사용자가 다른 탭을 선택할 때 느리게 빌드됩니다.TabBarViewContainer

클론 코딩이란 : 다른 어플리케이션을 복제해서 생성하는걸 의미함

모든 함수의 시작은 main()함수이다 인지하자

위젯은 2가지로 구분된다

1. StatelessWidget : 상태가 변하지 않는 위젯(화면내용 X)

2. StatefulWidget : 상태가 변하는 위젯(화면 내용 O)

   • 생성자를 생성
   • build 함수는 State 클래스에 있음
   3. NavigatorWidget : 페이지 이동

   기본코드 인지

   // 페이지 이동

       Navigator.push(
         context,
         MaterialPageRoute(builder: (context) => SecondPage()), // 다음 페이지
      Navigator.pop(context); // 되돌아가기(앞페이지)
   
       );

4. home : Homepage() //네임드 파라미터 변수라고함(이름지정 매개변수) > home 변수에 homepage를 넣어라 의미

5. app을 만들때 기본적으로 레이아웃을 구상 이후에 코딩 진행

6. 컬럼, 로우, 스택 3가지로만 레이아웃은 다 가능함

   • 컬럼 : 말그대로 컬럼
   • 로우 : 말그대로 로우
   • 스택 : 겹치는것.

7. Expanded 위젯 추가 하려면 wrap widh widget 선택 -> widget 이름을 Expanded로 변경

★8. 위젯들을 분리(body 단위) > 기능을 변경하지 않고 코드를 정리(리펙토링)

• body를 주로 분리
• body 내에서 반복되는 코드를 다시 또 위젯으로 분리

  extract widget

9. ListView Builder

기본 body: ListView.builder( itemCount: 100, // 전체 아이템 개수, 없으면 무한대 표시 itemBuilder: (context, index) { // index는 0 ~ 99까지 증가하며 itemCount만큼 호출됩니다.

사용법 : 반복헤야할 위젯

wrap builder 추가 Listview.builder 입력

10. 데이터를 보여주는 껍데기를 View라고 부른다
    • View와 데이터를 분리하면 View 재활용이 좋음

• 개발환경 구성하는대 오류가 겁나 많이 떠서 힘들더라구...

  1주차 교육 시작

  vscode - 플루터 프로젝트 실행

  pubspec.yaml을 주로 수정함

1. command palette - flutter new project - app - folder 지정

2. command palette - Dart:Use Recommanded Settings

   DART 수정사항이 전체 반영

3. 에뮬레이터 실행 command palette - Flutter launch Emulator - pixel 버전(안드로이드 스튜디오 확인필 실행)

4. 용어 정리 padding : 안쪽여백 margin : 바깥쪽 여백

1주체 과제 MovieViews 만들기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), // 홈페이지 보여주기 ); } }

class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { // 영화 제목, 사진 데이터 List<Map<String, dynamic>> dataList = [ { "category": "탑건: 매버릭", "imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg", }, { "category": "마녀2", "imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg", }, { "category": "범죄도시2", "imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg", }, { "category": "헤어질 결심", "imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg", }, { "category": "브로커", "imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg", }, { "category": "문폴", "imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg", }, ];

// 화면에 보이는 영역
return Scaffold(
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.white,
    centerTitle: false,
    iconTheme: IconThemeData(color: Colors.black),
    title: Text(
      "Movie Reviews",
      style: TextStyle(
        color: Colors.black,
        fontSize: 28,
        fontWeight: FontWeight.bold,
      ),
    ),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.person_outline),
      )
    ],
  ),
  body: Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
          decoration: InputDecoration(
            hintText: "영화 제목을 검색해주세요.",
            border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.black),
            ),
            suffixIcon: IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ),
        ),
      ),
      Divider(height: 1),
      Expanded(
        child: ListView.builder(
          itemCount: dataList.length,
          itemBuilder: (context, index) {
            String category = dataList[index]['category'];
            String imgUrl = dataList[index]['imgUrl'];

            return Card(
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Image.network(
                    imgUrl,
                    width: double.infinity,
                    height: 200,

                    //height: double.maxFinite,
                    fit: BoxFit.cover,
                  ),
                  Container(
                    width: double.infinity,
                    height: 200,
                    color: Colors.black.withOpacity(0.5),
                  ),
                  Text(
                    category,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 36,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    ],
  ),
);

} }

여기서 힘들었던 부분은 처음에 appbar가 아무리 불러도 호출이 안되서 잠깐이나마 해맨거와 두번째로 return Scaffold( 이부분에서어떤식으로 작성하는지 전혀 모른부분.. 그리고 나서는 목표물 보면서 하나씩 코딩 모르는건 구글링 참고

그래도 정답은 보지 않았다는거에 1표

비록 내머리에서 다 나와서 코딩한건 아니지만.

1주차는 이렇게 지나가는구나.

여러가지요소들의 대한 사용법도 익히고, 이제 숙달되게 사용해서 숙지하는 방법뿐일거다.

2주차도 기대가 되는구만.

1. 플루터를 열심히 배워서 내가 만들고 싶은 APP 만들어서구글 Playstore에 Upload가 목적!!!

2. 하나이상의 APP을 개발하는게 목적!!!

3. 내 전부인 현주가 원하는 필요한 앱을 만드는게 목적!★

플루터를 열심히 배워서 내가 만들고 싶은 APP 만들어서

• 구글 Playstore에 Upload가 목적!!!

• 하나이상의 APP을 개발하는게 목적!!!

• 내 전부인 현주가 원하는 필요한 앱을 만드는게 목적!!!!!!!