DevBoi

여러가지 Material을 사용할 수 있다. https://api.flutter.dev/flutter/material/TabBar-class.html TabBar class - material library - Dart API A Material Design primary tab bar. Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView. If a T api.flutter.de..

검색 기능구현 필요. 검색에 대한 기능 처리 중 어떻게 구현을 해볼까.. 싶었음 글자를 입력할떄마다 자동으로 검색이 될수도있고, 검색하기 버튼을 누르면 검색이 될수도있음 요새 대세는 자동 검색인듯..? 그래서 필요한 ListBuilder를 구현, 해당 ListBuilder와 FutureBuilder는 자동으로 값이 추가되면 해당 값을 읽고 setState로 상태변경을 해주지 않아도 상태를 변경해줌 Flutter 에서는 검색을 위한 클래스들을 지원해준다. SearchDelegate 아래 클래스를 상속받아서 Search Class를 구현해주자 기존 골격은 구현 해야하는 메소드들을 구현했고, 초기에 userId를 전달 받아서 결과에서 제외해준다. 추천 친구리스트에서도 동일하게 친구 추가를 할 수 있게 끔 세팅..

친구 Layout 관련 만들었던 백엔드 Api를 붙여보자 screen source body: Container( child: FutureBuilder( future: getFriendList(userId.toString()), builder: (context,AsyncSnapshot snapshot){ if (snapshot.hasData) { return ListView.builder( padding: EdgeInsets.symmetric(horizontal: 20), itemCount: snapshot.data.length, itemBuilder: (BuildContext context, int index) { FriendItem item = snapshot.data[index]; return Fri..

1. S3에 이미지를 올린다. https://devboi.tistory.com/564 참고하여, S3 구성 테스트 이미지 세팅 2.플러터 S3이미지 호출 방법 assets가 아닌 외부 Url로 이미지를 세팅하는 방법은 이렇다. Image.network( "s3주소/image/3126993.png", height: 170, width: MediaQuery.of(context).size.width, fit: BoxFit.cover, ), 3. 확인 4. 데모 백엔드 서버 구성 Docker-compose + Spring Hibernate + Mariadb (비즈니스 로직에 따라 querydsl 옵셔널) 5. 플러터에서 데모 백엔드 호출 라이브러리 추가 + http 통신 api 개발 http: ^0.13.5 F..

많이 쓰는 조합이다. 서버를 호출해서 데이터를 가져온다. 가져와서 리스트뷰로 아이템 세팅해서 뿌려준다. 대부분 이미지 + 텍스트 의 데이터를 기반으로 세팅하기에 해당 조건으로 템플릿을 생성한다. 우선 디렉토리를 위의 구조로 간다. data를 받아오는 곳은 해당 폴더에서 처리를 한다. 우선 해당 파일에서 리스트를 return 한다. List posts = List.generate( 13, (index) => { "name": names[random.nextInt(10)], "dp": "assets/images/cm${random.nextInt(10)}.jpeg", "time": "${random.nextInt(50)} min ago", "img": "assets/images/cm${random.nextIn..

Splash Screen 세팅은 아래 내 블로그 다른글에 집중적으로 작성했다. 참고하자 https://devboi.tistory.com/649 1. Splash Screen 의존성 추가해준다. dependencies: flutter_native_splash: ^2.3.1 #Splash 스크린 2.Splash Screen을 세팅해준다. 프로젝트 루트 경로에 flutter_native_splash.yaml 파일 생성 (주석처리 된 부분 참고하여, 커스터마이징) flutter_native_splash: # This package generates native code to customize Flutter's default white native splash screen # with background colo..

라이브러리 의존성을 주입받다보면 dart버전을 업그레이드 해야한다 1) 명령어로 업그레이드 그냥 프로젝트 가서 아래 명령어 치면 끝난다. flutter upgrade --force 알아서 이후에 flutter doctor까지 진행해주어서, 검사까지 해준다. 2) 직접설치 1번의 방법으로 진행이 안되면,아래로 진행하면 된다. 프로젝트에 대한 설정을 해주어야 한다. https://docs.flutter.dev/release/archive?tab=macos Flutter SDK archive All current Flutter SDK releases: stable, beta, and master. docs.flutter.dev 사실 위 과정은 안하고 이과정만 해도 무리는 없다. 위 링크에서 아래의 사진에서 다..

매번 카카오 로그인을 하는 사람은 없다. 카카오 로그인 이후에 회원정보를 캐시에 저장해두고, 해당 정보를 사용하자 https://devboi.tistory.com/665 [Flutter] shared_preferences 사용 1. 의존성 추가 shared_preferences: ^2.2.0 2. 텍스트 받을 위젯 세팅 final _contentEditController = TextEditingController(); child: TextField( controller: _contentEditController, style: TextStyle(color: Colors.black), decoration: InputDecoratio devboi.tistory.com 해당 글을 참고해서 shared_prefe..

Android 카카오 로그인 연동 1. AndroidManifest.xml packageName 확인 2. 해시키 값 얻는 명령어 keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 위 두가지 내용을 해당 정보에 넣어준다. 3. AndroidManifest의 파일에 아래 내용을 추가해준다. 여기서, kakao~key}까지 다 지우고, 즉 안에 값을 통으로 네이티브 키값으로 변경해줘야한다. 4. build.gradle compileSdkVersion 를 33버전으로 고정해준다. min..

BoilerTemplate BottomNavigation에 대해서 구현할거다. 저번에는 로그인에 대해서 까지만 구현했다. 로그인 이후에 해당 사용자 정보를 가지고 메인으로 가는 소스를 구현해보자 물론 메인으로 가기전에 캐시에 저장은 할 것이다. 1. 로그인 성공 시 main 화면으로 이동 IconButton( icon: Image.asset('assets/images/kakao_login.png'), iconSize: 350, onPressed: () async { viewModel.login().then((value) => Navigate.pushPageReplacement(context, MainScreen()) ); } ) login을 하면 NavigatepushPageReplace로 페이지를 전환..