분류 전체보기155 [flutter] 12 효율적인 데이터 관리 3, List 응용 이번 포스팅에서 해 볼 것List 를 응용한 Widget의 구성TextField Widget의 활용Widget을 변수에 담아 활용 *지난번 포스팅 내용에 이어서 진행이번 포스팅에서는 List를 활용한 사용자와 앱의 상호작용이다.목표 횟수를 사용자가 체크하는 기능이다.본인의 운동 기록을 입력하고 제출하면, 목표 달성 여부를 알려주는 기능의 구현이다. 1. 앱 화면 구성앱 구현을 위해 아래의 세 가지 요건을 고려하여 화면을 추가적으로 만들 예정이다.운동 횟수 기록 및 제출하는 텍스트운동결과에 따라 목표 달성 여부를 보여주는 모서리가 라운드 처리 된 카드화면을 꽉 채운 바닥부분 앱 구현을 위해서 먼저 앱 기능과 관계 없이 화면에 고정된 UI의 모양 껍데기만을 먼저 구현해보고, 추후 데이터 연결 및 기능 구.. 2024. 8. 31. [flutter] 11 효율적인 데이터 관리 2, For Loop * 지난 포스팅의 예제에 계속 이어서 학습 반복문은 굉장히 많이 쓰이는 문법이다.지난 포스팅에서 운동명과 횟수를 고정된 형태에서 유연하게 바꾸기 위해 리스트를 사용했었다. 오늘의 운동→주말 운동1. 싯업 501. 싯업 202. 친업 152. 푸시업 503. 스쿼트 1003. 버피 45 4. 스쿼트 200 5.친업 30 하지만 위 표처럼 운동의 갯수 자체와 운동명, 횟수 모든 것들이 변경된다면리스트구조만으로는 대응이 어렵다. 컬럼 이하에 있는 운동의 갯수가 고정되어 있기 때문임. 운동 갯수를 자동으로 생성하는 구조를 만들어야 대응이 가능하다. [dart]에는 총 4가지 루프문이 있다.forfor-inforEachwhile, do-while 하나만 잘 알아두면 나머지는 비슷한 논리로 동작.. 2024. 8. 30. [flutter] 10 효율적인 데이터 관리 1, List 학습을 위한 선행준비 : 데이터가 들어있는 장표 만들어보기 가. 앱 기본골격 셋팅void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: WorkoutTrackerPage(), ); }}class WorkoutTrackerPage extends StatefulWidget { const WorkoutTrackerPage({super.key}); @override State createState() => _WorkoutTra.. 2024. 8. 28. [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. 이전 1 2 3 4 5 ··· 26 다음
