Flutter (22) 썸네일형 리스트형 Flutter DatePicker 사용하기. Flutter에서 DatePicker를 사용하여 날짜 선택하는 팝업 만들기.팝업창 띄워주는 메소드showDialog(context: context, builder: builder) // (구글) 안드로이드에서 흔히 보는 팝업showCupertinoDialog(context: context, builder: builder) // (애플) iOS에서 흔히 보는 팝업showCupertinoDialog( context: context, barrierDismissible: true, // 팝업 바깥쪽 배경을 누르면 팝업창이 사라짐 (기본은 false) builder: (BuildContext context){ return Align( // 정렬을 해주지 않으면 높이나 너비를 정의하더라도 최대 사.. Flutter에서 Theme 사용하기 플루터에서 커스텀 테마 만들고 적용하기.앱을 개발하다 보면 같은 글꼴, 크기, 색상 등 같은 스타일을 적용해야하는 부분들이 있는데 이를 한꺼번에 관리하기 위한 것이 테마 이다. 1. MaterialApp 부분에 ThemeData 설정 (텍스트 테마로 예시를 듬)기본 텍스트 테마 설정.void main() { runApp( MaterialApp( theme: ThemeData( textTheme: TextTheme( ), ), home: HomeScreen(), ), );}여기에서 텍스트 테마를 설정하는데 TextTheme를 ctrl 키 누르고 클릭하면 TextTheme에 대한 코드들이 나온다. 이 중에서 원하는 이름을 고.. Flutter 화면 가로 세로 높이 구하기 Flutter에서 모바일 화면의 최대 가로 세로 높이를 구하는 코드.MediaQuery.of(conext).size.widthMediaQuery.of(conext).size.height@override Widget build(BuildContext context) { return Scaffold( body: SizedBox( width: MediaQuery.of(context).size.width, // 화면 최대 가로 길이 height: MediaQuery.of(context).size.height, // 화면 최대 높이 길이 child: Column( ), ), ); } 응용- 화면에서 절반만 사용하고 싶다 (어떤 .. Flutter에서 font 추가 및 사용하기 Flutter 앱개발하는데 여러 폰트를 추가하고 사용하는 방법 1. 폰트를 프로젝트 안의 폴더 안에 넣어두기 2. project.yaml 파일에 font 설정flutter: uses-material-design: true # 이미지 설정 assets: - asset/img/# 폰트 설정 fonts: - family: parisienne fonts: - asset: asset/font/Parisienne-Regular.ttf - family: sunflower fonts: - asset: asset/font/Sunflower-Light.ttf - asset: asset/font/Sunflower-Medium.ttf .. Flutter Timer와 PageView, PageController를 통해 사진 넘기기 Flutter에서 Timer를 사용 및 PageView와 PageController를 통해 애니메이션 적용하기 1. StatefulWidget으로 진행2. State 안에 PageController와 Timer 객체 생성class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => _HomeScreenState();}class _HomeScreenState extends State { PageController controller = PageController(); //PageController Timer? timer; // 타이머 . . . 3. initS.. StatelessWidget과 StatefulWidget 의 생명주기 StatelessWidget과 StatefulWidget 의 생명주기는 각각 다르기 때문에 적절히 사용하면 성능 향상에 도움이 된다. StatelessWidget Lifecycle StatefulWidget Lifecycle 1. Constructor()생성자 2. createState()Stateful Widget 객체를 생성하면 생성자가 호출되고 이 메서드가 호출된다. Stateful Widget 에서 필수적으로 오버라이드 해야 하는 메서드이다.이 메서드의 역할은 State 객체를 생성하는 일. 3. initState()State 객체가 생성되면 State 객체의 생성자가 호출된다.처음 한 번만 호출되는 함수이다. 여기서 데이터나 속성값을 초기화 할 수 있다.context를 사용 할 수 없다.Con.. StatefulWidget 과 StatelessWidget 의 차이 StatefulWidget 과 StatelessWidget 의 차이를 간단히 말하자면 StatelessWidget- 한번 그려지고 나면 변화가 없다 ( build 부분이 한번만 실행 됨 ) StatefulWidget- 한번 그려지고 난 후 상태 변경이 가능하다 - setState( () {} ); 함수를 이용해서 build를 다시 할 수 있다 ( UI 변경이 가능함 ) 즉, flutter에서 UI 부분을 만들고 이를 보여주는 건@overrideWidget build(BuildContext context) { return ~~~~; }이 부분이 실행되어야 UI부분이 변경이 되는데 StatelessWidget 은 한번만 실행되고 StatefulWidget 은 setState 함수를 호출함으로써 .. 안드로이드 스튜디오 Dart SDK 설정하기 안드로이드 스튜디오에서 Flutter를 사용하기 위해 Dart SDK 설치하는 방법. 1. 상단 File > Settings2. Languages & Frameworks > Dart 에서 Enable Dart support for the project ~ 체크박스 체크 3. Dart SDK path 부분에는 flutter 설치한 곳에서 가져오기- flutter > bin > cache > dart-sdk 위치 설정 4. Enable Dart support for the following modules 안에 있는 체크박스 두개 다 체크 후 ok 이전 1 2 3 다음