나만의 개발블로그

폰에 저장된 연락처 몰래 가져오는 법 & 타입시스템 연락처를 꺼내는 방법으로는 패키지를 하나 설치해야 함 pubspec.yaml에서 contacts_service를 설치하기! 물론 버전은 다를 수 있지만 contacts_service: ^0.6.3 작성 후 전구에서 pub get을 해주기 dependencies: flutter: sdk: flutter permission_handler: ^8.3.0 contacts_service: ^0.6.3 이후 main.dart의 상단에 호출하기 import 'package:contacts_service/contacts_service.dart'; 설치를 한 다음엔 무조건 실행되고 있는 프로그램을 중지하고 재실행을 시켜야함!! 이후 ContactsService.getC..

유저에게 앱 권한 요청하기 모바일에서 유저의 모바일에 있는 데이터를 사용하기 위해선 권한 요청을 하게 되는데 권한 요청을 하기 위해선 패키지를 하나 설치해야 한다. 프로젝트에 있는 pubspec.yaml에서 dependencies 아래 부분에 permission_handler를 작성해주면 되는데 우선은 강사님과 버전을 맞추기 위해 아래와 같이 작성 dependencies: flutter: sdk: flutter permission_handler: ^8.3.0 이후 permission_handler 를 선택 후 전구를 클릭 하여 Pub get을 클릭하면 설치가 된다. 다만 여기서 **A dependency may only have one source** 와 같은 에러가 발생하게 된다면 문제는 들여쓰기가 잘..

유저가 입력한 데이터를 변수에 담는 방법 controller input 데이터를 담을 변수를 생성 후 TextEditingController() 위젯을 담아주고 var inputData = TextEditingController(); TextField에 controller: input 데이터 담은 변수 이름 을 작성해주면 child: TextField( controller: inputData ,style: TextStyle(fontSize: 30),), 자동으로 변경되는 input 데이터에 대한 value 값이 담겨지게 된다. (이건 좀 편하네) 해당 데이터의 값을 출력하고자 한다면 변수.text를 하면 된다 print(변수.text) onChanged() React에서 사용하는 것과 유사 onChang..

자식 위젯이 부모 위젯의 state 사용 Props를 하는 방법의 단계 보내기 전송할 클래스 즉 하위 위젯, 자식 위젯의 인자 값으로 이름: state 값 을 전송 ex) return Modal( 작명: 보낼 state값 ); 등록하기 받는 클래스에서 인자 값으로 state를 등록 이후 변수 공간에 다시 한번 등록해주기 여기서 JavaScript의 const 역할처럼 변하지 않는 변수 타입으로 Read-Only 만 할 경우엔 final을 붙여주면 된다. 사용하기 그냥 사용하기 현재는 title을 전송해서 Contact라는 변수를 하위 클래스로 전달 후 사용하는 코드 작성 import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( ..

Dialog/모달창 만드는 법 & context Dialog란? 모달창을 의미 버튼을 클릭 시 모달 창을 띄우고자 한다면? 우선 모달을 띄우고자 한다면 showDialog()를 사용하면 되고 인자로는 context와 builder로 채워준다 builder는 함수로 (context){} 로 작성을 하면 된다. 코드는 아래과 같이 작성하게 되는데 우선 변경 된 부분으로는 원래 void main() 에 runApp()으로 home: MyApp() 만 전달하게 되고 MaterialApp은 그 아래의 클래스인 _MyAppState의 최상단에서 return으로 감싸줘서 return MaterialApp( Scaffold() ) 와 같이 작성했었는데 아래의 코드와 같이 변경한 이유는 context의 특징점으로 작성하..

StatefulWidget 만들기 지난번에 만들었던 버튼 기능으로 클릭시 1증가하는 a에 대한 변수를 버튼에 보이도록 하고 클릭될 때 마다 변경되는 것을 확인하려고 아래와 같이 코드를 작성 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { MyApp({super.key}); var a = 1; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( floatingActionButton: FloatingActionButton( child: Text(a.toString(..

목록 ListView, Builder & 버튼 기능 구현 우선 좌측에 사진, 우측에 글이 있는 경우 예를 들어 페이스북 또는 인스타, 카톡의 유저 목록을 구현할 때 사용하면 좋은 것으로 ListTile() 이라는 위젯이 있다. ListTile()을 사용하면 Row를 하지 않아도 쉽게 레이아웃을 구현할 수 있는 장점이 있다. // 기존 숙제로 작성했던 코드 body: ListView( children: [ Row( children: [ Icon(Icons.person, size: 50), Text('홍길동', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400),) ], ), Row( children: [ Icon(Icons.person, size: 5..

Custom Widget 만들기 레이아웃 용 위젯들이 너무 길다면 커스텀 위젯으로 대체할 수 있다. stless를 입력 후 tab 또는 enter를 입력하면 자동으로 완성된다. class extends StatelessWidget { const ({super.key}); @override Widget build(BuildContext context) { return const Placeholder(); } } 이후 Class명을 파스칼 케이스로 작명 후 return 으로 넘길 레이아웃을 작성하면 된다. 그래서 아래와 같이 작성하게 되면 같은 작업을 반복할 필요도 없고 코드의 가독성 또한 좋아지게 된다. 다만 단점으로는 state 관리에 대한 어려움이 있다. 그래서 재사용이 많은 UI들을 커스텀 위젯으로 ..

Expanded, Flexible & 상품 레이아웃 Row()안에 박스 2개를 넣었는데 박스의 폭을 50%로 설정하고자 한다면 Flexible() 로 감싼 다음 사용하면 사용할 수 있다. 물론 Column() 도 가능하다. body: Row( children: [ Flexible(child: Container(color: Colors.blue), flex: 3), Flexible(child: Container(color: Colors.green), flex: 7) ] ) Row() 안에서 박스 하나만 꽉채우고 싶다면 Expanded()를 사용하면 된다. 즉 Expanded()를 사용하면 남은 공간을 모두 채우는 역할을 한다. body: Row( children: [ Expanded(child: Conta..

Flutter에서 박스디자인하는 법(Margin, Padding, 정렬) 지난 시간 강사님의 작성 코드는 아래와 같다. Container 또는 SizedBox를 사용해서 높이를 지정하는 방식을 사용 import 'package:flutter/material.dart'; void main() { //runApp 안에 있는 MyApp을 실행해달라는 코드 runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('..