취미노트/코딩공부19 [flutter] 09 효율적인 구조의 코드 작성, 함수 활용 - 이번에 해 볼 것 -ExpandedWidget의 활용심화 단계의 [dart]함수 학습Refactoring을 통한 효율적 코드 작성 1. ExpandedWidget을 활용한 버튼 제작이번에는, 지난번 플레이버튼 제작의 연장선으로, 5개의 버튼과 5개의 사운드 파일 재생 기능을 만들어보자. 먼저, ElevatedButton을 Column으로 Wrap하자. 세로로 버튼을 배열하기 위함이다.그 뒤 ElevatedButton 4개를 복붙하면 총 5개의 버튼이 만들어진다.텍스트와 mp3파일명도 5개 각각 조절을 해주자. Column( children: [ ElevatedButton( onPressed: (){ player.play(AssetSource("audios/sound1... 2024. 8. 18. [flutter] 08 빠르고 다양한 앱 제작의 시작, 패키지 -이번에 해 볼 것 -Flutter Package에 대한 이해Audio Player Package 활용 1. 선행작업(1) 버튼을 누르면 음악이 나오는 새 프로젝트를 개발할 예정이다(2) 새 프로젝트를 생성한 뒤, assets/audios 폴더에 mp3파일 저장(3) pubspec.yaml 파일에 경로 지정 후 저장 및 pubget(4) appBar를 만들고 제목 텍스트 달아주기void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title.. 2024. 8. 18. [flutter] 07 사용자 동작, Gesture 처리 - 이번에 해 볼 것 -onPress Gesture의 이해와 활용[Dart] 변수와 함수에 대한 이해Gesture에 따라 이미지 변화Stateless, Statefull 위젯의 차이[Dart] 조건문(if condition)의 이해 지난번 포스팅에 이어서, 버튼을 클릭하면 이미지가 변경되는 기능을 이번에 구현하고자 한다.클릭(onTab, onPress)에 해당하는 제스처를 처리하는 방법은 다양하지만, 이번에는 Button 위젯을 써보도록 한다. 참고로, https://docs.flutter.dev/ 사이트에서 플러터의 위젯들을 찾아볼 수 있다. 1. onPress Gesture 처리클릭 기능 구현을 위해 먼저 고민해야 할 사항이 있다. 바로 터치 인식을 어느 영역에 지정하느냐 이다. 화살표.. 2024. 8. 18. [flutter] 06 화면 구성의 시작 3, Expanded * 참고사항 : 플러터 관련 포스팅들은 해커스HRD에 있는 플러터 강의를 수강하며 기록해두고 있는 나만의 강의노트임. 해커스HRD 챔프스터디 (hackershrd.com) - 이번에 해 볼 것 -ExpandedWidget 의 개념 이해 및 활용Context Action 활용Flutter Outline Tool 사용 1. 선행사항앞선 실습에서 만들었던 Strong Guy 앱과는 이제 작별하고, 새로 앱을 만든다.이름하여 burpee Test 라는 이름의 앱으로, 새 프로젝트를 만들고, 필요한 폰트나 이미지를 assets 폴더에 넣고stainlessWidget에 MaterialApp을 넣은 뒤home은 Scaffold로, appBar에 text로 burpee Test 라는 내용을 넣은 뒤, Lobster 폰.. 2024. 8. 17. [flutter] 05 화면 구성의 시작 2, 기초 위젯 -해볼 것-font 적용ContainerWidget 활용Icon출력Card, ListTile Widget 1. FONT 적용하기앞선 실습 기준으로, MyContainer에서 이미지가 출력되던 MyApp 위젯으로 다시 돌아가자.runApp에서 바꿔주면 된다. 세로로 이미지나 텍스트를 배치할 것이므로 Column 위젯을 사용할 예정.먼저 body에 기존에 붙어있던 Center 이하를 잘라내기 한 뒤,Column을 넣고 컬럼의 Children 아래로 붙여넣어준다. @overrideWidget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.black, appBar: App.. 2024. 8. 17. [flutter] 04 화면 구성의 시작 1, 기초 위젯 - 이번에 할 거 -핫 리로드와 핫 리스타트컨테이너 위젯컬럼, 로우 위젯안드로이드스튜디오의 인스펙터라는 도구 1. 핫 리로드와 핫 리스타트의 차이개발은 코드 넣고 화면 갱신해보고 이것의 반복 과정임. [번개버튼] 핫 리로드 - UI적 요소만 제한적 갱신, 빠른 대신 데이터 갱신 없음[세모버튼] 핫 리스타트 - 대부분 요소를 갱신 핫 리로드는 main 함수를 다시 실행시키지 않는다.이 때문에, 앞선 페이지에서 연습 했던 위 사진의 코드는 핫 리로드가 먹지 않는다.코드를 메인에서 분리하기 위헤 stateful 또는 stateless 위젯을 사용해야 한다. Statelesswidget : 빠른 속도Statefulwidget : 다양한 기능 위 코드는 Stateless widget으로 변환해볼 예정이다. 이 상.. 2024. 8. 15. 이전 1 2 3 4 다음
