차근차근 배움터

해당 강의에서는 아래와 같은 더 많은 것을 배울 것이다. 데이터 패칭, 다른 패키지, 인터넷, api of the phone, how to store the data on the phone disk 네이버 웹툰 어플처럼 요일별 웹툰을 확인할 수 있게 만들 것이고 실제 클릭했을 때는 네이버 웹툰으로 연결하는 기능을 만들 것이다. 이 데이터를 이용할 것이다.

AlertDialog 경고창을 띄우는 방식이다. Navigator.pop(context) 을 통해서 창을 닫는 기능까지 구현 가능하다. TextButton( style: ButtonStyle( shadowColor: MaterialStateProperty.all(Colors.red), backgroundColor: MaterialStateProperty.all( Theme.of(context).cardColor, )), onPressed: () { showDialog( context: context, builder: (context) => AlertDialog( title: const Text('Are you nuts?'), // content: Text('Of course not!'), actions:..

backgroundColor: 이후에 그냥 Color가 아니라 MaterialStateProperty.all () 을 이용해야 한다. TextButton( child: Text('test'), style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)), onPressed: () {}, ),

코드 챌린지 지금까지 만든 화면에는 존재하지 않는 Restart 하는 기능을 넣어보자! when we want to make our screen changed.... we have to put inside of setState() TextButton( style: ButtonStyle( shadowColor: MaterialStateProperty.all(Colors.red), backgroundColor: MaterialStateProperty.all( Theme.of(context).cardColor, )), onPressed: resetTimer, child: Text( 'RESET', style: TextStyle( color: Theme.of(context) .textTheme .headline..

format 함수를 만들어서, 숫자를 시간으로 변환하는 기능을 만들었다. 확실히 보기 좋아진 모습! import 'dart:async'; import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => HomeScreenState(); } class HomeScreenState extends State { static const twentyFiveMinutes = 1500; int totalSeconds = twentyFiveMinutes; bool isRunning = false; late Timer time..

재생 버튼을 누르면 재생되고 멈춤 버튼을 누르면 멈추는 기능을 만들어 봤다. 이런 작업을 할 때 boolean을 이용한다는 것 잊지 말기 그리고 함수 안에 setState() 넣기도 잊지 말자 다음 시간에는 숫자가 시간 형태로 59 이상을 넘어갈 때 00으로 넘기는 작업을 한다.

재생 버튼을 누르면서 현재 시간이 줄어드는 기능을 추가해봤다 다음 시간에는 멈춤 기능을 만들어 본다. import 'dart:async'; import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => HomeScreenState(); } class HomeScreenState extends State { int totalSeconds = 1500; late Timer timer; void onTick(Timer timer) { setState(() { totalSeconds = totalSeconds - 1..

Container( decoration: BoxDecoration( borderRadius: const BorderRadius.only( topLeft: Radius.circular(50), topRight: Radius.circular(50), ), .only로 topLeft, topRight을 이용한다. topLeft, topRight 뒤에는 int 형식이 아닌 다시 Radius.circular(값) 형태로 입력해야 한다.

사이즈를 하드 코딩하는 것보다 사실 flexible을 사용하는 것이 기기의 비율을 바탕으로 꽉 채워주기 때문에 이게 제일 이상적인 크기 설정 방법이 아닐까 싶다. import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => HomeScreenState(); } class HomeScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Theme.of(context).bac..

statefulWidget에 대해서 한 가지 더 알아야 할 점은 Live cycle라는 것이다. 한 번 씩 확인하는 게 좋은 것 initState는 state를 initialize하기 위함이다. 하지만 그냥 int count = 0; 쓰듯이 state를 initialize할 수도 있다. 대부분의 경우 initState()를 사용하지 않아도 된다. 하지만 가끔 위젯은 initilaitze some datas depends on the paretns, ocontext를 사용해야 할 수도 있다. context/subscribe를 사용해야할 수도 있다. initState method build 메서드 전에 호출되며 오직 한 번만 호출된다. initState()를 사용할 때는 super.initState()가 필..