기타/Flutter 7

Flutter supabase 연결하기

supabase는 간단하게 백앤드 서버를 구축할 수 있는 백앤드 서비스 플랫폼이다.이 포스팅은 supabase 사용방법보다는 맨 처음 supabase와 flutter 연결 설정하는 것에 초점을 둠 flutter와 supabase를 연결하기 위해서는 다음 과정을 거친다.supabasesupabase 사이트 접속 후 로그인supabase에서 project 생성supabase의 project에서 table 생성table의 policy 설정flutterpubspec.yaml 파일에 의존성 추가terminal에서 package 설치dart 파일에 supabase-flutter package importsupabase에서 project의 API key 값들 얻어옴supabase initializesupabase c..

기타/Flutter 2024.07.29

[Flutter 기초] Button 만들기 (ElevatedButton, TextButton, IconButton

Flutter에서 기본적인 Button은 ElevatedButton, TextButton, IconButton이 있다.  ElevatedButton & TextButton 이 중 ElevatedButton과 TextButton은 비슷한데, 가장 큰 차이점은 ElevatedButton은 버튼 모양에 그림자가 있다는 것이다. (나머지는 비슷한 거 같다) 이 두 위젯은 코드 형태 또한 유사한데, 기본적으로 onPressed와 child 이 두 가지 parameter가 있어야 동작을 한다. ※ onPressed : 버튼을 누르면 동작하는 내용에 대해서 넣음ElevatedButton(onPressed: onPressed, child: child) // 기본 꼴ElevatedButton(onPressed: (){}..

기타/Flutter 2024.07.08

[Flutter 기초] Container 위젯

기초 위젯 중 하나인 Container 위젯은 Box를 만든다. Container 위젯에서 사용하는 중요 parameter들은 다음과 같다.width : 컨테이너의 너비 설정height : 컨테이너의 높이 설정color : 컨테이너의 배경색을 설정alignment : 컨테이너 내 자식의 위치를 제어padding : 컨테이너 가장자리와 컨테이너 내부 사이의 안쪽 여백 정의margin : 컨테이너의 바깥쪽 여백 정의decoration : 테두리, 배경 이미지 또는 기타 꾸미기를 컨테이너에 추가하는데 사용 (자세한 건 검색)※  만약 width, height, child 정도만 필요하다면 Container 위젯보다 SizedBox 위젯이 효율이 더 좋다. (Container는 무거움) 가장 기초가 되는 par..

기타/Flutter 2024.07.05

[Flutter 기초] Layout 기초

여러 위젯들을 원하는 위치에 배치하는 것은 중요함이 글은 Layout에 여러 위젯들을 배치하는 기초적인 방법(scaffold, row, column)에 대해서 설명하는 글 ScaffoldScaffold 위젯은 화면을 크게 위, 본문, 아래 3가지로 나눈다. ( drawer, buttomNavigationBar 같은 parameter가 있지만 지금은 고려하지 않는다) 아래 코드 모양을 기본 꼴로 하고 내부에 여러 위젯을 추가하여 화면을 구성한다.class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: ..

기타/Flutter 2024.07.05

[Flutter 기초] 기본 위젯 4개

※ 기본 setting과 실행 방법은 아래 두 글을 참고한다.Flutter 설치 (in Window)[Flutter 기초] main.dart 기본 setting앱의 화면은 여러 위젯들을 추가하여 배치하는 형식으로 만들어진다.이 글은 여러가지 위젯 중 가장 기본이 되는 글자, 아이콘, 이미지, 박스 위젯을 만드는 방법에 대해서 설명한다.※ 모두 MaterialApp() 안에서 추가 한다.textclass MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Text("안녕") ); }} Iconclas..

기타/Flutter 2024.07.05

[Flutter 기초] main.dart 기본 setting

기본 setting기본적으로 project를 만들면 lib이라는 폴더 안에 main.dart 라는 파일이 있다.이 파일에 뭐가 많이 쓰여져 있는데 다 무시하고 void main() { } 밑에는 다 지운다.stless + tap키 눌러서 아래 스크린샷 같이 만든다.class 옆에 MyApp을 입력한다. return 옆에 const Placeholder() 를 지우고 MaterialApp()을 추가한다. (Mat~ 치다가 Tap 눌러서 자동완성)아래 스크린 샷에서 파란색으로 표시한 부분은 기본적으로 Android Studio가 만들어주는 부분이라서 지금 당장은 이해하려 하지 않는다.

기타/Flutter 2024.07.05

Flutter 설치 (in Window)

Flutter를 설치하고 실행하기 위해서는 크게 4가지를 하면 된다.Flutter SDK 다운로드Android Studio 설치환경변수 등록나머지 설정Flutter 다운로드https://flutter-ko.dev/get-started/install/windows Choose your first type of appConfigure your system to develop Flutter on Windows.docs.flutter.dev여기로 들어가서 아래 스크린샷같이 최신 버전.zip 파일을 다운로드 받는다(window 운영체제가 아니면 다른 방식으로)zip 파일을 원하는 위치에 압축 해제한다. 이때, D 드라이브 이런데 넣지말고 꼭 C 드라이브 안에 넣어야 한다. (D드라이브에 넣으면 에러나서 다시 설치..

기타/Flutter 2024.07.02