[Flutter] 5. 기능 추가

2023.11.23 - [dev/flutter] - [Flutter] 4. 위젯 수정

[Flutter] 4. 위젯 수정

 

가이드 링크 : https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#5

 

 

가이드에서는 'Next'옆에 또다른 버튼 기능을 넣으려 한다.

해당 기능 코드는 다음과 같다

// 비즈니스 로직
class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  // add the code
  var favorites = <WordPair>[];   // 배열인가?

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }

    notifyListeners();
  }
}

: toggleFavorite()함수를 사용하면 favorites배열에 포함되어 있지 않으면 추가하고,

: 있다면 삭제하는 로직이다.

: 버튼 기능의 목표인 좋아요를 하였다가 취소하는 방식이라고 이해하면 된다.

 

 

Next버튼 옆에 두기 위해서 Row로 Wrap해준다.

: MainAxisSize는 max=모든 공간 차지 / min=wrap_content 크기 만큼만 조절되는 것

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Text('A random AWESOME idea:'),
            // Text(appState.current.asLowerCase),
            BigCard(pair: pair),
            SizedBox(height:10),
        
            // Add Button
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  onPressed: () {
                   appState.getNext();
                  }, 
                  child: Text('Next')
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

 

 

내가 직접 짠 좋아요 버튼...

                ElevatedButton(
                  onPressed: () {
                    appState.toggleFavorite();
                  }, 
                  child: Text("Like")
                  ),

: 뭔가 대강 느낌은 알겠지만...

: 플루터란 아두이노에 대한 자신감과는 다른 느낌의 영역이다.

 

layout_margin은 어떻게 주는 것일까..?

: SizeBox(width: 10) 이걸로 중간에 margin을 주는구나?

 

아이콘 버튼은 'ElevatedButton.Icon()'을 사용하고,

: onPressed

: icon: Icon(icon)   // IconData icon;

: label: Text('like')    // 이렇게 설정

    // Heart Icon
    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }
    
    
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                /*ElevatedButton(
                  onPressed: () {
                    appState.toggleFavorite();
                  }, 
                  child: Text("Like")
                  ), */
                ElevatedButton.icon (
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('like'),
                ),

                SizedBox(width: 10,), // margin역할을 너가 하는구나

                ElevatedButton(
                  onPressed: () {
                   appState.getNext();
                  }, 
                  child: Text('Next')
                 ),
              ],
            )

 

 

참... 나중에 내가 애용하는 언어가 되면 좋겠지만,

지금은 정말 별로인 언어 같구나~