배운것들을 정리합니다.
三昧境

Flutter 19

[플러터 Flutter] 약관 동의 페이지 만들기1 (on/off 토글키 및 bool타입 선언)

Flutter v3.22.2Dart v3.4.3DevTools v2.34.3 우선은 동의하느냐 안 하느냐의 문제이기 때문에 bool로 접근하여 빌드해보았습니다.필수동의 2개, 선택동의 1개가 있으며필수동의 2개를 반드시 true값으로 만들어줘야 확인버튼을 활성화시켜다음 페이지로 넘어가는 기능을 구현해 보겠습니다// agreement_condition_text.dartbool isAllChecked = false;bool isRequireChecked = false;bool isConditionChecked = false;bool isInfoChecked = false;bool isThirdChecked = false;void updateAllChecked() { isAllChecked = isCondi..

플러터 당근마켓 앱 카피코딩3 (피드정리)

ListView에서 각기 다른 이미지, 글 보여주기feed.dart 파일 Feed Stete에 String을 담는 imageUrl이란 변수를 선언해 줍니다.허나 그냥 선언하면 안되고Feed class내에 imageUrl이 필수로 값을 받을수 있게끔final과 required this를 사용해서 선언해줍니다. 그리고 이미지를 담고있는 ClipRRect의 child에일반적인 String형식의 Url이 아닌 widget.imageUrl을 넣어줍니다.widget. 을 사용하는 이유는 State class내에는 존재하지 않고 더 상위 클래스인 StatefulWidget에 포함되어있고 이 둘의 class는 서로 다른 class이기 때문에 서로다른 class의 변수를 사용하기 위에서는 widget.변수이름으로 사용하..

플러터 당근마켓 앱 카피코딩2 (좋아요 기능 구현, 피드리스트)

좋아요 기능 구현 좋아요 기능을 구현하기 위해서는 현재 내가 보고 있는 페이지에 상태가 변하기 때문에(어떠한 로직으로 화면의 변화가 생기는것)그 해당 페이지의 State를 바꿔줘야한는데class Feed extends StatelessWidget { const Feed({ super.key, });현재 Feed라는 페이지는 StatelessWidget으로 되어있다. 이것을 안드로이드스튜디오 기준맥 option + Enter / 윈도우 Alt + Enter 를 눌러주면위 사진 처럼 자동으로 StatefulWidget으로 변환하여 줍니다.나도 잘 모르지만 해석해보자면@override = class Feed extends StatelessWidget 을 재정의 하겠다.State createState(..

플러터 리팩토링(refactoring)

리팩토링(refactoring)이란?기능을 변경하거나 추가하지 않고 코드만 관리하기 쉽게 변경하는 과정을 리팩토링(refactoring)이라고 부릅니다. 리팩토링(refactoring)하는 이유규모가 큰 앱을 만들수록 코드의 복잡도가 올라가므로 주기적인 리팩토링을 통해 복잡도를 낮춰줘야 프로젝트가 손을 떠나지 않는다...그러니까 main.dart 안에 appBar부터 bottomNavigationBar까지 몇백줄이 넘어가는 코드들은 가독성도 떨어지고 시간이 지나면 지날수록 작업 속도가 떨어지니 제때제때 리팩토링(refactoring)을 하여 정리를 해주란 뜻입니다. 리팩토링(refactoring)하는 방법아래 방법은 를 통해 진행되었습니다. 위 사진처럼 /lib 폴더안에 정리해야할 파일들을 만듭니다. /..

Flutter/tip 2024.04.30

플러터 당근마켓 앱 카피코딩1 (appBar, body, floatingActionButton, bottomNavigationBar)

스파르타코딩클럽에서 국비지원을 받아 공부하는 게시물입니다.당근마켓을 카피코딩 해보았습니다.앱을 만들때는 항상 구도(appBar, body, floatingActionButton, BottomNavigationBar)를 어떻게 사용할지 구상을 한뒤,위에서부터 차례대로 내려오는 방식으로 구성하면 좋을것 같습니다.그렇기에 appBar부터 시작. appBarappBar: AppBar( backgroundColor: Colors.white, elevation: 1, shadowColor: Colors.black, leading: Row( children: [ SizedBox(width: 16), Text( ..

플러터 ListView.builder 가로 스크롤, TextField clear

기본적으로 가로로 스크롤하기, 이미지URL 사용하기, 텍스트필드 클리어, 키보드활용시 바디가 밀려올라오지 않게하기.를 집중적으로 해보았다. 아직 배워가는 과정이라 그 외에의 추가적인 기능을 넣기에는 힘들었지만. 일단 오늘의 목표치까지 한것에 대해서 작성하겠습니다. 완성코드 import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: fals..

간단한 로그인 화면 만들기

가장 윗줄 부터 천천히 하나씩 제가 이해한대로 풀어보겠습니다.틀린게 많을 예정입니다..import 'package:flutter/material.dart';flutter/material.dart 패키지를 변환하여 현재 시트에 적용시키겠다는 뜻.void main() { runApp(MyApp());}코드의 메인바디. runApp이란 함수에 MyApp을 실행하겠다 선언합니다.class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);객체지향 사용. class란 객체에 MyApp이란 이름 부여. StatelessWidget의 주요 역할은 간단한 UI의 일부 렌더링 및 상시 표시, 내부상태 불변성 보장,(오류 줄여줌) 상태가..

Flutter,Dart dictionary (중간중간 수정필요)

DartGoogle에서 개발한 언어. 크로스플랫폼으로써 IOS, Android에 접근가능. FlutterDart언어를 사용하며 프로그래밍하는 프레임워크. camelCase카멜케이스. 변수를 선언할때 가장 앞글자와 단어와 단어사이 띄어쓰기가 불가능하여 다음 단어의 앞글자는 대문자로 표기. (testCode) PascalCase파스칼케이스. Class를 선언할때 가장 앞글자를 포함, 단어와 단어사이 띄어쓰기가 불가능하여 다음 단어의 앞글자는 대문자로 표기. (TestCode) voidreturn 개념에서 반환할곳을 없다고 표기할때. 생략가능. ;Dart언어에서는 문장이 끝날때마다 ;로 마무리 지어줘야함. 변수var과는 별개의 개념. 변수를 선언한다할때 var name. int numb. 를 봤을때 var(..

Flutter/Glossary 2024.03.13