flutter9 [Flutter] 반응형 웹 만들기 반응형 웹을 만드려면 우선 PC/Tablet/Mobile의 사이즈 정의가 필요하다. 1200px/976px/500px 기준으로 미디어쿼리를 이용해 width와 height의 길이에 따라 UI가 사이즈에 최적화 되도록 하였다. MediaQuery와 width/height Widget build(BuildContext context) 내부에 MediaQuery 코드를 입력한다. Widget build(BuildContext context){ print('width : ${MediaQuery.of(context).size.width}'); print('height : ${MediaQuery.of(context).size.height}'); var width = MediaQuery.of(context).size.. 2022. 1. 5. [Flutter] TextField 최대 입력 길이 조절하는 방법 maxLength 최대 입력 길이를 조절하려면 TextField 아래 maxLength를 사용한다. 최대 길이만큼 숫자값을 입력한다. counterText 하단에 입력 최대 길이를 없애려면 TextField의 InputDecoration 안에 counterText: ''를 사용한다. 2021. 10. 26. [Flutter] Stack 컴포넌트 위치 조절하는 방법 Stack Stack을 사용하면 여러가지 위젯을 겹쳐놓을 수 있다. Positioned Stack 하위의 위젯 위치를 변경하기 위해서는 Stack 하위에 Positioned를 사용하여 (top,bottom,right,left)위치를 세부적으로 조절 할 수 있다. Overflow 또는 Clip 위젯이 경계선을 벗어나게 하고 싶으면 Overflow나 Clip을 사용하면 된다. overflow: Overflow.visible; 와 clipBehavior: Clip.none; 는 같은 기능을 한다. Stack 참고자료 > clipBehavior 참고자료 > 2021. 10. 26. [Flutter] 다음 Text Field로 포커스를 넘기는 방법 다음 버튼 클릭 시 다음 텍스트 필드로 포커스 넘기기 비밀번호 변경 시 새 비밀번호 입력 후, 키보드의 다음 버튼이 완료버튼으로 변경되며 텍스트 필드 포커스가 넘어가는 액션을 주려고 한다. 🧭 기능정리 키보드 다음버튼을 완료버튼으로 변경하는 기능 텍스트 필드 포커스가 다음으로 넘어가는 기능 두가지 기능이 필요하다! 비밀번호를 입력하고 다음 버튼을 누르면 완료 버튼으로 변경되며 비밀번호 확인 텍스트필드가 포커스 된다 🧭 사용코드 미리보기 TextField( textInputAction: TextInputAction.next, onSubmitted: (_) => FocusScope.of(context).nextFocus(), ); textInputAction 키보드 버튼 상태를 변경하기 위해 TextInpu.. 2021. 10. 25. [Flutter] Dialog에 SingleChildScrollView 사용하기 현상 Dialog 위젯 안에 있는 SingleChildScrollView 영역이 디바이스 사이즈를 벗어나는 경우 사이즈 오버로 에러가 뜨는 모습을 확인했다. 해결 👉 SingleChildScrollView를 Flexible로 감싸기 SingleChildScrollView를 Flexible로 감싸주어 디바이스 사이즈 영역에 알맞게 사이즈가 맞춰지고 Dialog 내부에 스크롤도 잘 작동했다. Dialog( Flexible( SingleChildScrollView( ///이 안에 Dialog Component를 넣어주세요:) ); ); ); Colored by Color Scripter cs 참고사이트 입니다 https://github.com/flutter/flutter/issues/23555 ⚠️ 실수 처.. 2021. 10. 25. [Flutter] 아코디언 리스트 : Expansion Panel ExpansionPanel 의 정의 Expansion 즉, 확장할 수 있다는 뜻으로 아코디언처럼 펼쳐지는 리스트를 구현할 수 있습니다. 헤더와 본문이 있으며 확장하거나 축소할 수 있습니다. 패널 본체는 패널을 확장할 때만 볼 수 있습니다. ExpansionPanel 는 어떻게 사용할까? ExpansionPanel은 오직 ExpansionPanelList를 하위 항목으로 가집니다. 예제를 살펴보면 메인 위젯 안에 Appbar와 ExpansionPane로 구성되고, 정보를 받아오는 Item 클래스를 선언합니다. Item 클래스는 expandedValue와 headerValue, isExpanded로 구성하고 있는데, expandedValue는 아코디언리스트의 body안에 타이틀을 선언하고, headerVal.. 2021. 9. 17. [Flutter] 버튼 클릭 시 잉크가 퍼지는 효과 : InkWell 앱 버튼을 탭하면 마치 잉크가 퍼지는 것 같은 효과를 사용한 버튼이 있다. 내가 한 행동을 확실하게 인지시키기에 좋은데, inkwell을 사용하면 이 기능을 구현할 수 있다! 컨테이너처럼 별도의 기능을 제공하지 않는 위젯에 제스쳐 기능을 추가할 때 Inkwell 기능을 사용할 수 있다고 한다:) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 import 'package:flutter/material.dart'; void main() => runApp.. 2021. 9. 16. [Flutter] 로또어플 만들기 - 버튼 클릭 시 활성화/비활성화 설정하기 고정수, 제외수 선택 후 로또번호 뽑기 로또윙 어플리케이션에서 랜덤뽑기 방식으로 고정수와 제외수를 선택하려 한다. 고정수와 제외수란 로또번호 선택 시 꼭 넣고 싶은 수를 고정수라고 하고, 제외하고 싶은 수를 제외수라고 한다. 각각 원하는 숫자의 버튼을 선택한 후 포함, 불포함을 설정해야 한다. 랜덤뽑기 순서는 고정수 선택 > 제외수 선택 > 랜덤뽑기 이다. 번호가 중복 되지 않게 하기 위해 고정수 최대 5개 선택 후 제외수 선택 시 고정수가 화면에 표시되도록 했다. 고정수는 사용자가 원하는 숫자앱이기 때문에 로또윙 메인 컬러로 표현을 하여 긍정적인 느낌을 주려 하였고, 제외수는 피하고 싶은 숫자이기에 파랑과 대비되는 빨강으로 표현하여 컬러로 이미지의 구분을 두었다. 🍎 코드로 구현해보자 0. Slive .. 2021. 9. 15. [Flutter]이미지 연결이 안되는 현상 Flutter 업데이트를 한 후 이미지 연결이 안되는 현상이 나타났다. Failed host lookup: 'blog.kakaocdn.net' (OS Error: No address associated with hostname, errno = 7) 해결방안1 AndroidManifest.xml 파일 안에 를 입력한다 해결방안2 휴대폰 온라인 연결상태를 체크한다 2021. 9. 10. 이전 1 다음 반응형
