본문 바로가기

분류 전체보기78

[Flutter] The parameter can’t have a value of ‘null’ because of its type in Dart 에러 해결 플러터에서 새로운 위젯이나 함수를 만들었을 때 `The parameter can’t have a value of ‘null’ because of its type in Dart`에러가 발생하는 것을 종종 볼 수 있다. 이 메세지를 번역해보면 `다트에서는 파라미터로 null을 가질 수 없다`는 것이다. 다트에서 파라미터로 null을 가질 수 없는 이유는 null safety가 활성화 되어있기 때문이다. non-nullable 인자와 key는 null 이 될 수 없다. 함수와 생성자를 통해 null 값이 아님이 확인이 되어야 null safety를 통과할 수 있다. class Header extends StatelessWidget { const Header({ Key key, }) : super(key: ke.. 2023. 12. 21.
[Flutter] PROJECT(1) - YOUTUBE MUSIC 홈 화면 구현 Source code : https://github.com/FreeBono/youtube-music 플러터로 YOUTUBE MUSIC 홈 화면을 구현해 보았다. 완전히 일치하게 만들지는 않았고, 기본 UI틀을 지키면서 비슷한 느낌을 낼 수 있도록 하였다. Youtube Music의 홈화면은 ListView의 사용이 많을 것이라 생각되었다. 그래서 ListView를 보다 쉽고 효과적이게 구현할 수 있는 SliverList를 사용하는 것을 계획했다. appBar부터 bottomNavigationBar까지 어떤 식으로 코드를 작성했는지 살펴보겠다. appBar 구현 홈 화면 최상단에 유튜브 뮤직로고와 함께 서치 아이콘, 프로필 아이콘이 있는 appBar를 확인할 수 있다. 그리고 그 아래 음악 장르를 나누는 .. 2023. 12. 17.
[Flutter] UI(3) - systemNavigationBar 색깔 바꾸기 (Device NavigationBar 대부분 앱을보면 앱 내부의 bottomNavigation과 디바이스의 NavigationBar의 색깔을 일치시켜 통일감 있는 UI를 보여준다. 대표적으로 유튜브 뮤직과 인스타그램을 보면 같은 디바이스에서도 각각 다른 앱을 실행시켰을 때, Device NavigationBar의 색상이 다른것을 확인할 수 있다. Flutter에서 Device의 NavgitationBar의 색깔을 바꾸기 위해서는 SystemChrome 클래스의 setSystemUIOverlayStyle 메써드를 사용하면 된다. void main() { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemNavigationBarColor: Color.fromARGB(255, 14.. 2023. 12. 15.
[Flutter] Widget(7) - FutureBuilder FutureBuilder FutureBuilder 위젯은 Future와의 상호 작용에 대해 최신 스냅샷을 기반으로 자체 build되는 위젯이다. 주로 API 통신 등 데이터를 비동기적으로 받아와 화면에 그려주는 경우에 자주 쓰인다. Future 관리 future 상태는 State.initState, State.didUpdateWidget 또는 State.didChangeDependencies가 일어나는 것보다 더 빠르게 확보되어야 한다. FutureBuilder를 구성할 때 State.build 또는 StatelessWidget.build 메서드 호출 중에 생성되어서는 안된다. 만약 FutureBuilder와 future가 동시에 생성된다면, FutureBuilder의 상위 요소가 rebuild될 때마다.. 2023. 12. 13.