[Flutter] - Hold Press Button 만들기 (+ pub.dev 배포)

[Flutter] - Hold Press Button 만들기 (+ pub.dev 배포)

최근에 여러 앱을 사용하다보면, 버튼을 꾹 누르고 일정한 시간이 지났을 때 결과가 나타나는 그런 UI 경험한 적이 있었다. 간단하게 만든 이미지를 미리 추가하여 설명하자면, 버튼을 누르고 일정시간이 지나면 그에 맞는 결과가 나오게끔 만드는게 오늘의 목표이다. Progress를 표현할 shadow를 표현하기 위해 Stack 구조를 사용하기로 하였다. 또한 AnumationController를 이용하여 값을 체크하였고, 만약 버튼이 끝까지 가지않고 땠을 경우 원래대로 돌아오도록 하였다. class HoldPressButton extends StatefulWidget { String? contents; final Color? backgroundColor; final double? textSize; final ..

  • format_list_bulleted Flutter
  • · 2023. 8. 16.
  • textsms
[Flutter] - Bottom Overflow 문제 해결

[Flutter] - Bottom Overflow 문제 해결

문제 상황 다음과 같이 Textfield를 클릭하였을 때 키보드가 올라오면 Overflow가 발생하는 문제가 발생한다. 해결 방법 scaffold에 아래 코드를 추가하면 된다. resizeToAvoidBottomInset: false,

  • format_list_bulleted Flutter
  • · 2023. 8. 9.
  • textsms

SingleChildScrollView에 ListView 사용시 스크롤 문제 해결

스크롤이 중첩되다보니 생기는 문제이다. ListView의 내부에 다음 속성을 추가해주면 된다. physics: const NeverScrollableScrollPhysics(),

  • format_list_bulleted Flutter
  • · 2023. 7. 31.
  • textsms

<Flutter 에러> Floatingbutton 클릭시 showDialog가 안될때

floating button을 클릭시 showDialog가 화면에 보이도록 구현하려고 했는데, context관련 에러가 발생했다. 해결 방법은 다음과 같이 직접 Builder를 통해 context를 넘겨주면 된다. floatingActionButton: Builder(builder: (context) { return FloatingActionButton( onPressed: () { showAddDialog(context); }, ); }),

  • format_list_bulleted Flutter
  • · 2023. 7. 25.
  • textsms

[Flutter] - Future Builder

개요 이전 학습에서 http를 이용하여 비동기 API 통신을 했다. Future도 간단하게 공부를 하였는데, 결국 API 통신은 즉각적으로 바로 결과가 오는게 아니라, 상황에 응답 속도가 다르다. 그렇기에 일반적으로 로딩화면을 통해 데이터를 가져오고 있다는 것을 사용자에게 보여준다. 그렇다면 데이터가 도착하지 않았을 때는 로딩화면이 돌고 정상적으로 데이터 도착이 완료가 되었을 때 데이터를 보여주기 위해서는 어떻게 해야할까? 바로 Future Builder이다. child: FutureBuilder( future: webtoons, builder: (context, snapshot) { if (snapshot.hasData) { return const Text("There is data!"); } retu..

  • format_list_bulleted Flutter/Study
  • · 2023. 7. 20.
  • textsms

[Flutter] - Http

개요 개발을 하다보면, http를 이용하여 api를 호출해야 하는 경우가 있다. Flutter에서는 Http를 이용해 호출할 수 있다. 설치 pub.dev 에서 http를 검색하면, 설치 방법과 최신 버전을 확인할 수 있다. https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 아래의 두 가지 방법 중 원하는 방법을 선택하여 설치해주면 된다. Flutter : flutter pub add http pubspec.yaml dependencies: http: ^1.1.0 사용 사용을 위해 import를 해주어야 한다. import 'packa..

  • format_list_bulleted Flutter/Study
  • · 2023. 7. 20.
  • textsms