Flutter (80) 썸네일형 리스트형 [j Flutter] pageview indicator 추가하기 pageview에 indicator를 추가해보자. 1. smooth_page_indicator 플러그인을 설치해준다. dependencies: smooth_page_indicator: ^1.0.0+2 2. 코드 PageController _pageController = PageController(); SmoothPageIndicator( controller: _pageController, // PageController count: 3, effect: WormEffect( activeDotColor: Theme.of(context).primaryColor, dotColor: Theme.of(context) .colorScheme .background, radius: 2, dotHeight: 4, dotW.. [j Flutter] Currency Text Input Formatter 사용해 화폐단위 사용 및 콤마 찍어주기 Currency Text Input Formatter를 사용하면 TextFormField 입력 시 화폐단위 사용 및 콤마를 찍어 줄 수 있다. 1. Currency Text Input Formatter 플러그인 설치 dependencies: currency_text_input_formatter: ^2.1.8 2. TextFormField 적용 - 한국 화폐단위 적용 import 'package:currency_text_input_formatter/currency_text_input_formatter.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {.. [j Flutter] TextFormField 커서 맨 뒤로 보내기 TextFormField 사용 시 커서를 맨 뒤로 보내보자. 해당 코드를 추가해 주면 된다. _Controller.selection =TextSelection.collapsed( offset: _Controller.text.length) * 적용한 소스 TextEditingController _Controller = TextEditingController(); TextFormField( controller: _Controller, onChanged: (value) { if (value == '') { _Controller.clear(); } setState(() { _Controller.text = value; }); _Controller.selection = TextSelection.collapsed(.. [j Flutter] go_router 업데이트 후 Log 안 찍힐 때 go_router 플러그인 업데이트 후 로그가 안 찍힐 때 logging 플러그인을 추가해 로그를 찍어주는 방법이다. 1. logging 플러그인 설치 https://pub.dev/packages/logging logging | Dart Package Provides APIs for debugging and error logging, similar to loggers in other languages, such as the Closure JS Logger and java.util.logging.Logger. pub.dev dependencies: go_router: ^6.0.0 logging: ^1.1.0 pubspec.yaml 파일에 플러그인 추가 후 flutter pub get 실행해준다. 2. lo.. [j Flutter] Text 가운데 정렬 text를 가운데 정렬하는 방법입니다. Text 옵션에 textAlign: TextAlign.center 를 추가해 준다. Text("책을 반납하고 싶으시다면 000-0000으로 전화 주세요.", style: TextStyle( fontSize: 18.0, color: AppColors.text4, fontWeight: FontWeight.w300), textAlign: TextAlign.center) [j Flutter] StatusBar 높이 값 구하기 Flutter에서 StatusBar 높이 값 구하는 법이다. 높이 값을 구한 뒤 화면에 paddding값을 추가하였다. class Main extends StatelessWidget { @override Widget build(BuildContext context) { final double statusBarSize = MediaQuery.of(context).padding.top; return Container( child: Padding(padding: EdgeInsets.only(top: statusBarSize)) ); } } [j Flutter] TextField에 password 입력 효과 TextField 옵션에 obscureText : true 를 추가 해 주면 된다. TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', ), [j Flutter] 사진으로 화면 전환 되게 하기, 애니메이션 화면 전환 (like 당근마켓) 화면 전환 시 다음과 같은 효과를 적용해보자. 출처 : https://flutter-ko.dev/docs/cookbook/navigation/hero-animations 1. 같은사진을 두 화면에 적용해야한다. home화면과 이동 할 detail화면에 asset이미지를 적용해준다. Image.asset( "assets/images/a.jpg", width: 100, height: 100, ) 2. 이미지 위젯을 Hero로 감싸준 뒤 똑같은 tag 값을 적용한다. Hero( tag: "1", child: Image.asset( "assets/images/a.jpg", width: size.width, fit: BoxFit.fill, ), ) ** 꼭 똑같은 tag값을 지정해준다. 이전 1 2 3 4 5 ··· 10 다음
