Flutter27 [Flutter] UI(4) - ExpansionTile, Listile 아이콘 앞에 위치시키기(animation) ExpansionTile Widget을 이용해서 ui를 만들던 중 tailing에 위치한 아이콘을 leading 위치로 옮겨서 표현해야 하는 일이 생겼다. 애니메이션 효과 없이 단순히 위치를 옮기려면 ExpansionTile의 tailing에 SizedBox()를 넣어주고, leading에 아이콘을 넣어주면 끝이나지만, 기존에 tailing이 갖고 있던 회전 에니메이션을 그대로 추가해주기 위해서는 다른 위젯들의 활용이 필요하다. 코드 class TreeView extends StatefulWidget { final String node; final List? children; final bool initiallyExpanded; const TreeView({ Key? key, required this.n.. 2023. 12. 25. [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. 이전 1 2 3 4 5 6 7 다음
