Flutter.Study

3주차(1)- My memo(main.dart/HomePage)by Provide

도슬 2023. 7. 8. 07:28

1. 메모장 기능, 2. provide를 이용해 main.dart에서 memo_Service.dart데이터를 불러와서 적용, 3. 핀을 클릭했을떄 해당 목록 상단고정, 4. 메모를 수정했을때 수정시간 표시하기, 5. 빈 메모 삭제하기

late SharedPreferences prefs;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  prefs = await SharedPreferences.getInstance();
  runApp(
    //9~13줄 :  prefs라는 변수를 선언해 어디서든 sharedpreferences 객체를 사용할 수 있도록 한다.
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
            create: (context) =>
                MemoService()), //ChangeNotifierProvider로 MyApp을 감싼다.
      ], //그러면 MyApp하위 위젯들은 모두 memo_Service.dart을 사용할 수 있다.

      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

// 홈 페이지
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Consumer<MemoService>(
      //Consumer<MemoService>는 Provider로 등록된 MemoService를 찾는다.
      builder: (context, memoServicem, child) {
        //위에서 찾은 MemoService를 두번쨰 파라미터인 에 담는다.
        //그리고 담긴 memoServicem 변수를 통해 memo_service.dart의 MemoService의 데이터를 사용한다.
        List<Memos> memoList =
            memoServicem.memoLists; // 변수 memoList는 53줄 memoServicem인데
        //그 데이터는 memo_service.dart에서 memoLists를 가져왔다.

        return Scaffold(
          appBar: AppBar(
            title: Text("Mymemo"),
          ),
          body: memoList
                  .isEmpty //메모리스트에 아무것도없으면 텍스트 출력, 있으면 ListView.builder 출력
              ? Center(child: Text("메모를 작성해 주세요"))
              : ListView.builder(
                  itemCount: memoList.length, // memoList 개수 만큼 보여주기
                  itemBuilder: (context, im) {
                    return ListTile(
                      leading: IconButton(
                        icon: Icon(memoList[im].isPinned //im번째 memoList를 클릭했다면
                            ? CupertinoIcons.pin_fill //참일때 채워진 아이콘
                            : CupertinoIcons.pin), // 거짓일때 텅빈아이콘
                        onPressed: () {
                          memoServicem.updatePinMemo(isp: im);
                        },
                      ),
                      title: Text(
                        memoList[im].content, //메모리스트 im번째내용인데
                        maxLines: 3, //memo_service.dart의 content(메모의내용)을 받아온다.
                        overflow: TextOverflow.ellipsis,
                      ),
                      subtitle: Text(memoList[im].updatedAt == null
                          ? ""
                          : memoList[im].updatedAt.toString().substring(0, 16)),
                      //substring을 이용해 소수점 특정위치부터 잘라내기가능
                      onTap: () async {
                        await Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => DetailPage(
                              //클릭했을때 DetailPage로 화면전환,
                              i: im, //Scaffold 변수 im을 DetailPage 변수i로 넘겨준다.
                            ),
                          ),
                        );
                        if (memoList[im].content.isEmpty) {
                          //메모리스트 im번째에 들어온 내용이 텅 비었으면
                          memoServicem.deleteMemo(
                              //MemoService에서 값을 전달받은 memoServicem을 삭제해라.
                              isd: im);
                        } //im값을 memo_service.dart에있는 deleteMemo함수의 인덱스로 보낸다.
                      },
                    );
                  },
                ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () async {
              memoServicem.createMemo(contentc: ''); //플로팅 액션버튼을 눌렀을때 빈메모 생성

              await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => DetailPage(
                    i: memoList.length - 1,
                  ), //클릭 했을때 메모가 추가되므로 메모리스트길이 -1 의 인덱스 대입
                ),
              );
              if (memoList.last.content.isEmpty) {//플로팅버튼을클릭했을떄 마지막실행이 텍스트 추가이다. 그게 텅비었다면
                memoServicem.deleteMemo(isd: memoList.length - 1);//그래서 추가된길이-1이 인덱스가 된다.
              }
            },
          ),
        );
      },
    );
  }
}