[유데미x스나이퍼팩토리] 9주 완성! 프로젝트 캠프: 플러터 강의 - 5일차 과제

Controller

• 작성되고 있는 데이터를 가져올때 사용
• 위젯의 특정한 액션을 취하거나, 조종하고 싶을 때 사용
• Controller는 위젯 내에 변수로 선언하고, 그 변수를 조작하면 된다
• ex) TextField에 TextEditingController로 초기화된 Controller를 연결한다
• ex) PageView에 PageController로 초기화된 Controller을 연결한다.

Routing

• Scaffold 단위를 Page라고 생각하면 쉽다
• 페이지를 하나 더 만든다면 Scaffold를 최상위로 올린다
• Routing 하는 방법은 Navigation을 활용하는 것

Navigation

• Navigator.push를 사용해 새로 페이지를 불러온다
• Navigator.pop을 사용해 현재 페이지를 뺀다
  

  Navigator.push(
  	context,
      MaterialPageRoute(builder: (context) => 이동하고싶은Page()),
  );

  
  

IF문 in Flutter

• if문을 활용해서 보여줄 위젯만 보여줄 수 있다. else문은 사용하지 못해서 삼항연산자 ? : 를 사용한다.
• onTap() 안에 isExpanded = !isExpanded 를 넣고 if (isExpanded) 안에 위젯을 넣으면 탭할때마다 보이고 안 보이게를 설정할 수 있다
  

  children : [
  	Text('안녕하세요'),
      if(login)
      	TextButton(
          	onPressed: () {
              	//로그아웃
              }
              child: Text('로그아웃하기'),
          ),
  ]

  statement ? Text('True') : Text('false')

  
  

과제 요구사항💻

💙결과 및 후기💙

  - 과제 1번: Navigator.push를 Button에 연결해서 라우팅 구현

Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Assignment2(),
                    ));
              },
              child: Text('2번 과제'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Assignment3(),
                    ));
              },
              child: Text('3번 과제'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Assignment4(),
                    ));
              },
              child: Text('4번 과제'),
            )
          ],
        ),
      ),

  - 과제 2번: scollController를 floatingActionButton에 연결

ScrollController scrollController = ScrollController();
...
ListView.builder(
    controller: scrollController,
    itemCount: animalList.length,		
    itemBuilder: (BuildContext ctx, int index) {
        return Container(
            height: 300,
            child: Center(child: Text(animalList[index])),
		);
}),

 ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            scrollController.jumpTo(0);		//스크롤을 맨 위로 이동시킴
          });
        },
        child: Icon(
          Icons.vertical_align_top,
        ),
      ),

• ListView.builder사용 참고 블로그 https://black-glasses.tistory.com/entry/Flutter-Listviewbuilder%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EC%98%88%EC%A0%9C%EB%A7%8C%EB%93%A4%EA%B8%B0-Listviewbuilder%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B4%85%EC%8B%9C%EB%8B%A4

[Flutter] Listview.builder를 사용한 예제만들기 (Listview.builder를 사용해봅시다.)

  - 과제 3번: textField에 textFieldController 연결

 String mirroring = "";
 var textFieldController = TextEditingController();
...
TextField(
            controller: textFieldController,
            onChanged: (value) {
              mirroring = value;
              setState(() {});		// UI에 변경된 값이 반영될 수 있도록 build메소드가 다시 실행된다.
            },
          ),
          Text(mirroring),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          textFieldController.clear();    // textField를 clear  	
          mirroring = "";
          setState(() {});
        },
        child: Icon(Icons.close),
      ),

  - 과제 4번: 삼항연산자를 사용해 스위칭

Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          ListTile(
            leading: isSun		// 삼항연산자를 사용해 스위칭
                ? Icon(
                    Icons.sunny,
                    color: Colors.red,
                  )
                : Icon(Icons.sunny),
            title: Text('Sun'),
            trailing: IconButton(
              onPressed: () {
                isSun = !isSun;
                setState(() {});
              },
              icon: Icon(Icons.arrow_right),
            ),
          ),
          ListTile(
            leading: isMoon
                ? Icon(
                    Icons.nightlight,
                    color: Colors.yellow,
                  )
                : Icon(Icons.nightlight),
            title: Text('Moon'),
            trailing: IconButton(
              onPressed: () {
                isMoon = !isMoon;
                setState(() {});
              },
              icon: Icon(Icons.arrow_right),
            ),
          ),
          ListTile(
            leading: isStar
                ? Icon(
                    Icons.star,
                    color: Colors.yellow,
                  )
                : Icon(Icons.star),
            title: Text('Star'),
            trailing: IconButton(
              onPressed: () {
                isStar = !isStar;
                setState(() {});
              },
              icon: Icon(Icons.arrow_right),
            ),
          ),
          TextField(
            onSubmitted: (value) {		// 엔터쳤을 때 TextField에 입력된 값에 따라
              if (value == '태양') {
                isSun = !isSun;
              } else if (value == '달') {
                isMoon = !isMoon;
              } else if (value == '별') {
                isStar = !isStar;
              }
              setState(() {});
            },
            decoration: InputDecoration(
              hintText: '키고 끄고싶은 아이콘을 입력하세요.',
              hintStyle: TextStyle(fontSize: 14),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
              border: OutlineInputBorder(borderSide: BorderSide()),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {			
          isSun = false;		// 버튼 누르면 전부 초기화
          isMoon = false;
          isStar = false;
          setState(() {});
        },
        child: Icon(Icons.refresh),
      ),
    );

 

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #웹개발 #앱개발 #플러터 #flutter #개발 #안드로이드 #ios #단기캠프