ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 저번에 버튼안에 있는 1이 버튼을 클릭해도 숫자가 늘어나지 않았었는데 재렌더링이 안되었기 때문이고 재렌더링을 하려면 state 를 쓰면된다. state 가 변할 때마다 자동으로 재렌더링이 된다. 우리가 보통 변수에 데이터를 저장하듯이 Flutter 는 변수 혹은 state 에 데이터를 저장한다. state 는 변하면 state 를 사용하는 위젯이 자동 재렌더링 된다. state 만드는 법을 알아보자 1. StatefulWidget 만들기 stful 을 쓰고 tab 키를 누르면 class extends StatefulWidget { const ({Key? key}) : super(key: key); @override _State..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 ListTile 기본 위젯 : 왼쪽에 그림, 오른쪽에 글 있는 레이아웃 리스트 형태로 쉽게 만들 수 있음. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar(), bottomNavigationBar: BottomAppBa..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 레이아웃용 위젯들이 너무 길다면? -> 한 단어로(커스텀 위젯으로) 깔끔하게 축약가능 커스텀 위젯 만드는 법 빈공간에다가 stless 치고 tab 키 누르면 기본 틀 자동 생성 만들 때 해야할 것 1. class 작명 2. return 옆에 축약할 레이아웃 넣기 일단 class 이름은 ShopItem 으로 했고 축약할 레이아웃을 return 뒤에 넣어주었다. 이제 저 레이아웃은 ShopItem 이라는 한 단어로 축약해서 사용이 가능하다. 사실 맨 위에다가 변수에 넣어서 축약할 수도 있다, -> 하지만 성능에 문제가 있을 수 있으니 주의 변하지 않는 UI 들은 변수 함수로 축약해도 상관 없음 하지만 그렇다고 아무거나 다 커스텀위젯화를 하는건 옳지 않다 재사..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 저번 시간 숙제를 대강 해봤는데 수정할 점이 많다. 일단 1. appbar 에 있는 아이콘들을 검정 색으로 바꾸고 싶음 2. 지금은 별 아이콘으로 했지만 원래는 Image로 들어가야할 것이 오른쪽에 있는 텍스트와 높이가 같았으면 좋겠음 3. 텍스트들의 왼쪽정렬 오른쪽 정렬 각각 따로 적용하는 법 고쳐야 할 문제가 많다. 이번 강의를 들으면서 고쳐보려고 한다. row 방향으로 container를 2개 만들어 볼거다 container의 width를 100 lp 막 이런식으로 줄 수도 있겠지만 가로 폭의 50% 를 차지하게 만들고 싶을 수도 있다. 그럴 땐 아래처럼 Flexible 이라는 위젯으로 감싸준다. 그러면 % 로 값을 지정할 수 있다. flex 의 값..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 글자를 [자식]을 이용해서 넣어보자 child 안에 Text 를 넣어주면 된다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar(title : Text('앱임')), body: SizedBox( child : Text('안녕하세요'), ), ) )..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] Container 박스를 꾸며보자 width, height, color 값을 넣어주었다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar(title : Text('앱임')), body: Container( width: 50, height: 50, ..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] MaterialApp() 이라는 위젯을 알아보자 이 위젯을 쓰면 구글이 제공하는 Material 테마를 이용해서 앱을 만들 수 있다. 근데 이건 구글 스타일이고 나는 아이폰 기본 스타일의 앱을 만들고 싶다 라고하면 다른 위젯을 쓰고 사용하면 됨. 만약에 내가 직접 커스터마이징 하고싶다 라고 한다면 그래도 MaterialApp()을 써야한다. 이 위젯 안에 디자인만 포함되는게 아니라 기본 세팅들도 포함하고 있기 때문임. Scaffold() 위젯 이 위젯은 앱을 우리가 흔히 아는 '상 중 하'로 나누어준다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class ..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 초보 때에는 쓸데 없기 때문에 lint 를 잠깐 끄기 위해 analysis_options.yaml 파일에 저 코드를 추가해줬다 main.dart 파일에 가서 void main() 아래에 있는 코드 싹 날려주고 stless 입력 후 tab 키를 눌러준다. 이제 저기에 작성해주면 된다. void main() { runApp(const MyApp()); } 위 코드는 앱 시작해달라는 의미 앱의 메인 페이지를 입력하면 된다. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return..
ref : 코딩애플 [쉽게 알려주는 플러터 강의] 안드로이드 스튜디오는 원래 있어서 버전 업그레이드만 했고 flutter 설치, 이렇게 해줬다 contact 라는 연락처 프로젝트를 생성했고 이제 저 lib 이라는 폴더에 main.dart 가 메인페이지에 해당한다.
