store 하나

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (c) => Store1(),
      child: MaterialApp(
        home: MyApp(),
        theme: theme,
      ),
    ),
  );
}

여러 store를 모두 ChangeNotifierProvider로 등록해줘야 함 이렇게 여러 store를 사용할 땐 MultiProvider로 기존의 ChangeNotifierProvider를 감싸줘야 한다.

store 두개 이상

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (c) => Store1()),
        ChangeNotifierProvider(create: (c) => Store2()),
      ],
      child: MaterialApp(
        home: MyApp(),
        theme: theme,
      ),
    ),
  );
}

get 요청으로 갖고온 데이터 활용하기

그럼 이번에는 get 요청으로 가져온 데이터를 store 속 state에 넣는 방법을 알아보자

다른 함수랑 작성, 사용법이 똑같은데 async await만 잘 넣어주면 된다.

class Store1 extends ChangeNotifier {
  var profileImage = [];

  getData() async {
    var result = await http.get(Uri.parse('서버URL'));
    var result2 = jsonDecode(result.body);
    profileImage = result2;
    notifyListeners();
}

initState 때 쓴다 치면 깨알복습 initState 쓰려면 위젯이 stful이어야 한다.

void initState() {
  super.initState();
  Future.microtask(() {
    context.read<Store1>().getData();
  });
}

context.read<Store1>().getData(); 만 쓰게 되면 잠시 뻘건 화면이 떴다가 정상적으로 동작하는 걸 볼 수 있는데 Future.microtask 같은 걸 써서 MicroTask(비동기 작업 외 모든 동기 작업)를 먼저 처리하도록 해야 한다. MicroTask가 끝나면 나머지 Task들을 처리하는 순서다.

해결 방법

Image 등 위젯 크기 조정하기

오버플로 안나게 들어있는 위젯들을 쪼만하게 만들어주자

SingleChildScrollView로 감싸주기

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Column(children: []),
)

ListView로 감싸주기(Column)

ListView(
  return Column(children: []);
),

그 외

• Expanded로 감싸기(ListView)
• SizedBox로 감싸기(Container)

그래서 Provider라는 별도의 공간을 만들어 state를 관리하면 굳이 넘겨넘겨주지 않고 비교적 자유롭게 state를 활용할 수 있게 된다.

Provider

0. 설치 & import

// main.dart
import 'package:provider/provider.dart';

// pubspec.yaml
dependencies:
  provider: ^6.1.5

1. store 생성

state를 보관할 보관함을 만들자. store라 부른다.

class Store1 extends ChangeNotifier {
  var name = 'cool gamja';
}

2. store 원하는 위젯에 등록

store 내의 state를 쓰고 싶은 위젯은 죄다 ChangeNotifierProvider()로 감싸야 하는데 대부분의 위젯이 써야한다면 MaterialApp() 자체를 감싸버리자.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (c) => Store1(),
      child: MaterialApp(
        home: MyApp(),
        theme: theme,
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
      ),
    ),
  );
}

MaterialApp을 widget으로 감싼(전구) 다음 ChangeNotifierProvider로 바꾸고, create 문을 넣는다. 아까 만들어 둔 Store1와 파라미터 c가 필요하다. 이제 MaterialApp의 자식 위젯들은 Store1에 있는 모든 state를 쓸 수 있다.

3-1. store 내 state 갖다 쓰기

그냥 냅다 name 이렇겐 못쓰고 context.watch<Store1>().- 요런 형식 지켜야;

class Store1 extends ChangeNotifier {
  var name = 'cool gamja';
}

class Profile extends StatelessWidget {
  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(context.watch<Store1>().name)),
      body: Text('상세페이지'),
    );
  }
}

이제 모든 위젯에서 state를 직접 갖다 쓸 수 있게 됐다. 항상 쓸 필욘 없고 사이즈가 작은 경우 보내고/등록한뒤/쓰는 방식이 더 빠르다.

와!

3-2. store 내 state 변경

버튼을 누르면 개명이 되도록 만들어보자. 부모에서 자식한테 함수를 전달했듯 store 안에 setState하는 함수를 짜두면 된다.

이 때 만든 함수는 context.read<Store1>().- 이런 형식으로 쓸 수 있다. state는 watch, setState는 read.

밖에서 직접 바꾸지 않는 이유는 탕비실에 비유할 수 있다. 맘대로 갖다쓰면 횡령이고 쓰려면 매뉴얼을 따라야하듯 바깥에서 직접 변수를 건드리면 버그 발생률이 높다

이 때 setState를 쓰는게 아니라 notifyListeners를 쓸건데 state 수정 후 재렌더링하도록 만든다.

class Store1 extends ChangeNotifier {
  var name = 'cool gamja';
  changeName() {
    name = 'cool gogooma';
    notifyListeners();
  }
}

class Profile extends StatelessWidget {
  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(context.watch<Store1>().name)),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              context.read<Store1>().changeName();
            },
            child: Text('개명'),
          ),
        ],
      ),
    );
  }
}

정리

1. store 생성 (ChangeNotifier)
2. store 등록 (ChangeNotifierProvider)
3. state 사용 (context.watch().state명) (context.read().setState명 + notifyListeners)

import 'package:flutter/cupertino.dart';

GestureDetector(
  child: Text(widget.data[i]['user'], style: bold),
  onTap: () {
    Navigator.push(
      context,
      CupertinoPageRoute(builder: (c) => Profile()),
    );
  },
),

MaterialPageRoute 말고 CupertinoPageRoute를 쓰면 페이지 노출 시 우측에서 좌측으로 밀리는 트랜지션을 사용할 수 있다. import문 필수!

2. PageRouteBuilder

GestureDetector(
  child: Text(widget.data[i]['user'], style: bold),
  onTap: () {
    Navigator.push(
      context,
      PageRouteBuilder(
        pageBuilder: (c, a1, a2) => Profile(),
        transitionsBuilder: (c, a1, a2, child) =>
          애니메이션위젯(),
      ),
    );
  },
),

transitionsBuilder(c, a1, a2, child)

PageRouteBuilder 쓸 땐 파라미터 세 개가 필요하다. 커스텀 애니메이션을 transitionsBuilder에 넣을 수 있는데 얘는 파라미터 네 개가 필요하다.

네 개 파라미터 중 c는 context고

a1이 젤 중요한데 animation object라고 한다. 애니메이션이 얼마나 진행됐는지 0에서 1사이 숫자로 표현해준다. 페이지 전환 시작시엔 0, 전환이 끝나면 1인 셈이다.

a2도 animation object인데 child 말고 기존 페이지의 진행도를 의미한다. 보통 child에 애니메이션을 주고 싶으니 쓸 일이 많지 않을듯

child는 애니메이션 줄 애고 위 코드같은 경우 Profile이 들어있는 격

transitionsDuration

애니메이션 진행 속도를 지정할 수 있다. 예를 들어 transitionsDuration: Duration(miliseconds: 500)는 500밀리초 동안 애니메이션을 동작시키라는 의미다.

애니메이션 위젯

이름만 봐도 대충 뭐하는 위젯인지 알 수 있다. 이리저리 사용해보기

FadeTransition

FadeTransition(opacity: a1, child: child)

a1이 애니메이션 진행도이므로(0 -> 0.1 -> ... -> 1) opacity에 주면 a1과 함께 불투명도가 높아지며 Fade-In 효과를 만들어낸다.

SlideTransition

PageRouteBuilder(
  pageBuilder: (c, a1, a2) => Profile(),
    transitionsBuilder: (c, a1, a2, child) =>
      SlideTransition(
        position: Tween(
          begin: Offset(-1.0, 0.0),
          end: Offset(0.0, 0.0),
        ).animate(a1),
        child: child,
      ),
),

여기선 begin이 중요한데 slide 애니메이션의 시작 위치를 정할 수 있다. 왼쪽이 x 좌표고 오른쪽이 y 좌표다. 위 코드의 경우 페이지가 좌측에서 우측으로 밀리고, (1.0, 0,0)이라면 그 반대다. (0.0, -1.0)이면 위에서, (1.0, -1.0)이면 우측 상단 모서리에서 밀려온다.

Hero

페이지에서 게시물 누르면 게시물 내용은 고대로 유지되고 크기만 쑤욱 커지는 그거 짬 날 때 한번 써보기.

그 외

• PositionedTransition
• ScaleTransition
• RotationTransition
• SlideTransition

유저가 Text() 위젯을 눌렀을 때 상세페이지를 띄우고 싶을 수도 있음 근데 onPressed 같은 게 없으니 이 때 GestureDetector() 위젯으로 싸맨다.

GestureDetector(child: Text('싸매 me'), onTap: (){});

onPressed 말고 onTap을 쓸 수 있다. 길게 눌렀을 때 인터렉션 주려면 onLongPress 두 번 눌렀을 때 인터렉션을 주려면 onDoubleTap 핀치(확대 모션)할 때 주려면 onScaleStart 왼쪽으로 스와이프 했을 때 코드 실행하려면 onHorizontalDragStart

이런식으로 특정 동작에 따라 코드 실행시킬 때 GestureDetector() 써보기. 상세페이지는 Navigator.push()로 구현해보자.

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (c) => Text('상세페이지')),
  );
},

결과물

우와 생긴거

0. 데이터 보존 방법

1. 서버로 보내서 DB에 저장 - 중요한 데이터
2. 폰 메모리카드에 저장 - 들 중요한 데이터 요게 shared preferences를 활용하는 방법이다. 유저가 직접 삭제하지 않는 이상 반영구적으로 남아있게 됨

1. shared preferences

설치

// pubspec.yaml
dependencies:
  shared_preferences: ^2.5.3

// main.dart
import 'dart:convert'; // <- jsonDecode 함수 쓸 때 필요
import 'package:shared_preferences/shared_preferences.dart';

pub get 후에는 앱(emulator)을 종료하고 다시 시작해주자

사용법

데이터 저장

저장할 땐 storage.setString('데이터이름', 저장할데이터) 그니까 key하고 value 형태로 쓰면 됨

saveData() async {
  var storage = await SharedPreferences.getInstance();
  storage.setString('name', 'John');
}

데이터 출력

출력할 땐 storage.getString('데이터이름')

saveData() async {
  var storage = await SharedPreferences.getInstance();
  storage.setString('name', 'John');
  var result = storage.getString('name');
  print(result); // John
}

데이터 삭제

삭제할 땐 storage.remove('데이터이름')

함수

데이터 저장 함수

• setString('name', 'John')
• setBool('bool', true)
• setInt('int', 1)
• setDouble('double', 2.5)
• setStringList('stringList', ['John1', 'John2'])

map 자료형은 jsonEncode + setString 조합 활용 map에 전부 따옴표 붙여서 JSON으로 가라쳐줌

var storage = await SharedPreferences.getInstance();
var map = {'count': 3};
storage.setString('map', jsonEncode(map));

데이터 호출 함수

• getString('name')
• getBool('bool')
• getInt('int')
• getDouble('double')
• getStringList('stringList')

아까 저장한 map을 일단 갖고와보자

var result = storage.getString('map');
print(result); // {'count': 3}

근데 이거는 꺼내쓰기 어려운(result['count']: 에러) 형태라 jsonDecode 함수가 필요하다.

print(jsonDecode(result)); // Error: The argument type 'String?' can't be assigned to the parameter type 'String' because 'String?' is nullable and 'String' isn't.

그냥 getString 말고 .get('key')도 먹는데 꺼내보면 Object? 요런식의 타입으로 끄내짐. .getString('key')로 꺼내면 String? 이렇게 타입을 좀 더 명확하게 저장할 수 있다.

다시 돌아가서 String인지 null인지 확실히 않아 뜨는 에러를 해결하기 위해 ?? 써서 null check 해주기.

var result = storage.getString('map') ?? '없어';
print(jsonDecode(result)); // {count: 3}
print(jsonDecode(result)['count']); // 3

활용

• 기존에 state로 관리했던 데이터를 shared preferences에 넣어두고, 앱을 켤 때 갖고오는 식으로 관리하면 로드 속도가 빨라지고 2 서버와 주고받는 데이터 양도 줄일 수 있다.
• 근데 shared preferences에는 문자만 저장 가능하므로 이미지를 저장하고 싶을 땐 network 이미지를 폰에 몰래 저장해주는 패키지 cached_network_image를 써보자. 매번 다운받는 게 아니라 필요할 때 폰에서 가져와주니 더 빠르다.

와!

image_picker 설치

dependencies:
  image_picker: ^1.1.2

ios/Runner/Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>사진첩점 쓸게요</string>
<key>NSCameraUsageDescription</key>
<string>카메라점 쓸게요</string>
<key>NSMicrophoneUsageDescription</key>
<string>마이크점 쓸게요</string>

이런 걸 <dict> 밑에 넣는다. 사용자에게 허락 팝업 띄울 때 보이는 문구다.

main.dart

import 'package:image_picker/image_picker.dart';
import 'dart:io';

활용

이미지 업로드 버튼을 누른 사용자에게 접근 권한 요청 팝업을 띄우고 갖다쓴다 정도의 시나리오로 가보자

그전에 안드로이드 미리보기를 하면 카메라로 사진을 찍을수가 있음 녹색사람이 까불까불하는데 냅다 찍어서 갤러리에 사진 저장해두기

일단 기본 사용법

사진 말고 카메라 띄우려면 ImageSource.camera 이미지 말고 비디오 고르려면 picker.pickVideo() 여러 이미지 고르려면 picker.pickMultiImage()

IconButton(
  onPressed: () async {
    var picker = ImagePicker();
    var image = await picker.pickImage(source: ImageSource.gallery);
  },
  icon: Icon(Icons.add_box_outlined, size: 35),
),

이렇게 하면 고른 이미지가 image 변수에 저장되고 이걸 자유롭게 갖다 쓰기 위해 state(var userImage;) 하나 생성

setState() {userImage = File(image.path)}

요때 주의할 점 사용자가 이미지를 고르지 않았을 수 있으니 null 체크하기

파일 형식으로 이미지 띄우는 법

Image.asset은 asset 폴더에 있는 이미지 띄울 때 Image.network는 넷상 이미지 띄울 때 Image.file은 파일 경로로 이미지 띄울 때 사용

참고

photofilters

인스타 보면 게시물 올릴 때 필터 넣은거 보여주는 그거 만들 때 활용

노란 과속방지턱같은거

레이아웃 깨질 때 보이는거

resizeToAvoidBottomInset 써보거나 위젯을 아예 새 페이지로 분리해보거나 이미지 크기를 조절해보거나 스크롤바 넣어서 해결해보기

전체 예시 코드

IconButton(
  onPressed: () async {
    var picker = ImagePicker();
    var image = await picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        userImage = File(image.path);
      });
    }

    Navigator.push(
      context,
      MaterialPageRoute(builder: (c) => Upload(userImage: userImage)),
    );
  icon: Icon(Icons.add_box_outlined, size: 35),
),

페이지가 많은 경우 Tab, Nivigator 말고 아래와 같이 route를 활용할 수 있다.

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (c) => Text('초기 페이지'),
        '/detail': (c) => Text('다음 페이지')
      },
  );
}

initialRoute

앱 로드시 이동할 route 지정

routes

route별 보여줄 페이지(위젯) 지정

Navigator.pushNamed(context, route)

Navigator.pushNamed(context, '/detail') 이거 쓰면 유저들이 버튼 눌렀을 때 다른 라우트로 이동시킬 수 있음

주의

맨 처음부터 route 나누는 작업은 불필요할 것 같고 페이지 많아지거나 복잡한 앱일 경우 거때 나눠주면 좋을듯 state 이런거 끼면 굉장히 복잡해질 가능성 농hoo

특징

• 페이지 이동 시 새로운 페이지가 기존 페이지를 대체하는 웹사이트와 달리 모바일앱에서는 새로운 페이지가 기존 페이지 위에 덮이는 구조
• 탭과 달리 Stack으로 페이지가 관리되므로 뒤로가기 시 페이지가 걷히는 식

사용법

React의 useRouter랑 비슷하게 .push를 사용한다.

IconButton(
  onPressed: () {Navigator.push(context, route)},
  icon: Icon(Icons.add_box_outlined, size: 35),
),

• 이 때 context에는 MaterialApp 정보가 포함되어야 함
• 두 번째 파라미터는 route인데 아래와 같이 작성가능
• return 뒤, 그러니까 Text('New Page') 부분이 새로운 페이지로 뜨는거
• 길어지면 커스텀 위젯으로 빼는 게 방법 ~

MaterialPageRoute(
  builder: (c) {
    return Text('New Page');
  },
),

자란

닫기 버튼

새로 열린 페이지를 닫고 싶을 수 있으니 버튼 하나 만들어보자

IconButton(
  onPressed: () {
    Navigator.pop(context);
  },
  icon: Icon(Icons.close),
),

이 때 Navigator.pop에 들어가는 context는 Navigator.push와 마찬가지로 MaterialApp 정보를 포함해야 함

(참고) return 생략하기

위의 MaterialPageRoute의 builder에서와 같이 함수 안에 return문 하나밖에 없다면 아래와 같이 화살표 함수로 더 간단히 작성할 수 있다.

MaterialPageRoute(builder: (c) => Text('New Page')),

Arrow Function 인 잉글리시

• method(GET/POST), url 주면서 데이터 달라하면 주는 프로그램
• url은 서버 개발한 넘한테 묻/달라하기
• 서버 개발은 nodejs나 firebase 참고

GET

데이터 읽고 싶을 때

POST

데이터 보내고 싶을 때

테스트

강의 상 임시 서버로 GET 요청을 날려보자

패키지 설치

• pubspec.yaml > dependencies 밑에 http: ^버전
• pub get (전구)

AndroidManifest.xml

android > app > src > main > AndroidManifest.xml <application 앞에 <uses-permission android:name="android.permission.INTERNET" /> 작성

main.dart

맨 위에 아래 두 줄 추가

import 'package:http/http.dart' as http;
import 'dart:convert';

GET 요청 보내기

• MyApp 위젯이 로드될 때 GET 요청하도록 initState(){} 생성
• GET 요청은 시간이 걸리므로 넘어가지 않도록 await 필요
• 근데 initState에 async 못 붙이니까 GET 함수 따로 빼기

getData() async {
  var result = await http.get(
    Uri.parse('서버URL'),
  );
  print(result.body);
}

@override
void initState() {
  super.initState();
  getData();
}

jsonDecode()

• 큰따옴표로 묶어서 문자처럼 사기친 상태
• jsondecode로 가공 편하게 변환 ex) print(jsonDecode(result.body));

예외 처리

1. null data

에러 메세지

NoSuchMethodError: '[]'
Dynamic call of null.
Receiver: null
Arguments: [0]

원인

1. data가 아직 로딩되지 않은 상태 (null/빈 리스트)에서 data[i]에 접근해서
2. initState에서 비동기 함수 getData()가 실행중일 때, build()가 먼저 호출

해결

→ data == null 또는 data.isEmpty 체크

return data == null
  ? CircularProgressIndicator()
  : ListView.builder(

혹은

if (data.isNotEmpty) {
  return ListView.builder(
  // (생략)
} else {
  return CircularProgressIndicator()

2. !isDisposed

에러 메세지

Assertion failed: !isDisposed
"Trying to render a disposed EngineFlutterView."

원인

동기 작업이 완료되었을 때 위젯이 이미 dispose(unmount)된 경우 위젯이 unmount(dispose) 된 후에도 setState()가 호출되면 문제가 됨

void loadData() async {
  var result = await http.get(Uri.parse('서버URL'));
  setState(() {  // ❗ 요때 위젯이 dispose되었을 수 있음
    data = jsonDecode(result.body);
  });
}

해결

getData() async {
  var result = await http.get(Uri.parse('서버URL'));
  if (!mounted) return;
  setState(() {
    data = jsonDecode(result.body);
  });
}

3. 서버 다운 / 요청 경로 문제 등

getData() async {
  var result = await http.get(Uri.parse('서버URL'));
  if (result.statusCode == 200) { 요청 성공 시 실행 코드 }
  else { 실패 시 실행 코드 }
}

그 외

Dio

조금 더 짧은 코드로 GET 요청 가능한 패키지

FutureBuilder()

Future()를 뱉는 애들을 넣을 수 있는데 데이터가 자꾸 추가되면 사용하기 불편함

ex) body: [FutureBuilder(future: data, builder: (){}), ...],

list, map

map 안에 map, list 안에 list 등 모든 자료형을 넣기 가능

list

• 형태: [자료1, 자료2...]
• 읽기: list이름[0]
• 결과: 자료1

map

• 형태: {'이름1': 자료1, '이름2': 자료2...}
• 읽기: map이름['이름1']
• 결과: 자료1

• 프로젝트 최상단에 assets/ 폴더 만들고 이미지 파일 담기
• pubspec.yaml > flutter: assets: > 하단에 - assets/ 추가
• ex) Image.asset('assets/coolgam.png')

Image.network('웹이미지주소')

ex) Image.network('https://github.com/u0empty/image/1.png')

정말 못생겼다

코드(body)

body: [
  ListView.builder(
    itemCount: 3,
    itemBuilder: (context, i) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            'assets/icecream.png',
          ),
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text('좋아요 ', style: bold),
                    Text('100', style: bold),
                  ],
                ),
                Text('글쓴이'),
                Text('글내용'),
              ],
            ),
          ),
        ],
      );
    },
  ),
  Text('샵'),
][tab],

동적 UI 만들기

1. state에 UI(오늘은 tab)의 현재 상태 저장
2. state에 따라 UI를 어떻게 보일지 작성
3. 유저가 state를 쉽게 조작하도록 만들기

1. state에 tab의 현재 상태 저장

• 기존 위젯이 stless 였다면 stful로 변환하기
• state 생성 ex) var tab = 0;

2. state에 따라 어떤 tab을 노출시킬지 작성

• if문을 써도 되지만 body를 List로 짜면 편함
• body: [Text('홈'), Text('샵')][tab]

3. 유저가 state를 쉽게 조작하도록 만들기

• bottomNavigationBar의 구조가 아래와 같다면

기존 bottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: '홈',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_bag_outlined),
      label: '샵',
    ),
  ],
),

• onTab을 추가하여 tab 값을 변경하자
• onTab에는 파라미터 하나를 넣게 되어 있는데 탭 값과 같음

onTab이 있는 bottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  onTap: (i) {
    setState(() {
      tab = i;
    });
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: '홈',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_bag_outlined),
      label: '샵',
    ),
  ],
),

결과

TabBar 위젯 말고 PageView 같은 위젯도 사용해보자. 흔히 말하는 Carousel 개발 시 자주 쓰인다.

구조

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(bodyMedium: TextStyle(color: Colors.blue)), // 전체 텍스트 색상: 파랑
      ),
      home: Scaffold(
        body: Center(child: Text('파란색 텍스트')), // 별도 style 없음 → 파랑
      ),
    ),
  );
}

비교

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(bodyMedium: TextStyle(color: Colors.blue)), // 기본 파랑
      ),
      home: Scaffold(
        body: Theme(
          data: ThemeData(
            textTheme: TextTheme(bodyMedium: TextStyle(color: Colors.red)), // 오버라이드 빨강
          ),
          child: Center(child: Text('빨간색 텍스트')), // Theme 위젯 영향 → 빨강
        ),
      ),
    ),
  );
}

원하는 Theme 가져오기

style: Theme.of(context).textTheme.bodyMedium → ThemeData() > textTheme > bodyMedium Theme만 적용하라

요런식으로 원하는 ThemeData 안의 내용을 불러올 수 있다. 바꿔말하면 여러 스타일을 정의해두고 Theme.of()로 갖다 쓰기 가능

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          elevation: 1,
          titleTextStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
        ),
      ),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class MyApp extends StatelessWidget {
(생략)

여기서 ThemeData(~)를 잘라 lib 폴더 안에 새롭게 파일 하나를 만들고 붙인다. 만든 파일은 아무렇게나 작명 ex) style.dart

분리할 파일

에 옮긴 ThemeData(~)는 변수로 선언해주고 맨 끝에 세미콜론(;)을 붙인 뒤 main.dart에 있던 import 문을 갖다 붙인다. 기본 위젯들을 쓰기 위함이다.

import 'package:flutter/material.dart';

var theme = ThemeData(
  appBarTheme: AppBarTheme(
    elevation: 1,
    titleTextStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
  ),
);

마무리

정의한 변수명을 main.dart에서 ThemeData가 있던 곳에 작성하고, 해당 파일의 경로를 import 한다. 나는 자동완성 기능을 사용했는데 import 'style.dart';도 import './style.dart';도 된다.

import 'package:flutter/material.dart';
import 'package:instagram/style.dart';

void main() {
  runApp(
    MaterialApp(home: MyApp(), theme: theme, debugShowCheckedModeBanner: false),
  );
}

ThemeData() 뿐만 아니라 다른 모든 긴, 복잡한, 분리 필요한 코드도 요렇게 파일로 빼내어 관리할 수 있다.

import 시 변수 중복 문제 피하기

1. as 키워드로 파일 재정의

   import './style.dart as style';
   

(생략) MaterialApp(home: MyApp(), theme: style.theme),

```

2. 한 파일 내에 여러 변수가 정의된 경우, 다른 파일에서의 사용 막기 → 변수/함수/클래스명 앞에 언더바(_) 붙이기 ex) var _byeonsoo = ..;

MaterialApp에 debugShowCheckedModeBanner: false를 추가하자

MaterialApp(
  debugShowCheckedModeBanner: false,
  ...
)

자잔

DEBUG 배너의 역할

• 앱이 Debug 모드(개발 중 실행)로 실행 중임을 시각적으로 알림
• 릴리스 빌드(배포용)가 아니라는 것을 명확히 구분하기 위함
• 실수로 Debug 앱을 사용자에게 배포하는 것을 방지하기 위한 개발자 도구

Flutter 실행 모드 비교

프로젝트 생성

• File > New > New Flutter Project
• Flutter SDK Path 확인
• 프로젝트명 작명 > Create

lint 끄기

analysis_options.yaml 파일 내 rules: 밑에 코드 추가

rules:
  prefer_typing_uninitialized_variables: false
  prefer_const_constructors_in_immutables: false
  prefer_const_constructors: false
  avoid_print: false
  prefer_const_literals_to_create_immutables: false

const 부분은 재랜더링을 줄임, 앱 발행 전 true 시도해보기

main.dart

죄다 지우고 stless 위젯 대충 만들어서 시작 MaterialApp은 미리 빼두는게 편할듯

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

스타일 분리: Themedata()

사용법

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
      theme: ThemeData(
        iconTheme: IconThemeData(color: Colors.blue),
        appBarTheme: AppBarTheme(color: Colors.grey),
      ),
    ),
  );
}

특징

• 위젯 본인과 가장 가까운 스타일을 먼저 적용
• 복잡한 위젯(규칙X, 찾아보며 습득)은 복잡한위젯Theme() 에 넣어야 먹을 때가 있음 ex) IconThemeData(color: Colors.blue)이 있어도 appBar: AppBar(actions: [Icon(Icons.star)]), 속의 star는 blue가 아님

ThemeData 디자인 반영안됨

기존 코드

theme: ThemeData(
  iconTheme: IconThemeData(color: Colors.amber),
  appBarTheme: AppBarTheme(color: Colors.grey),
),

생김새

변경 코드

theme: ThemeData(
  iconTheme: IconThemeData(color: Colors.amber),
  appBarTheme: AppBarTheme(
    color: Colors.grey,
    actionsIconTheme: IconThemeData(color: Colors.amber),
  ),
),

생김새

TextThemeData 활용

• Text()는 bodyText2를 사용하는 등 내부적으로 정의된 값 존재
• 전체 Text 설정이라면 ThemeData 안에 넣어도 되지만 var text1 = TextStyle(); Text('', style: text1) 처럼 변수로 빼서 쓰는 게 나을지도

• MaterialApp(): 구글 기본앱 느낌, 커스텀도 이걸로하고 후에 구글물 짜기
• Curpentino(): 앱스토어 느낌

기본 위젯

• Icon(Icons.-)
• Image.asset('path')
• Text('', style: TextStyle(..))
• CircleAvatar(radius: 30, backgroundImage: AssetImage('assets/이미지.확장자')
• TextButton(child: Text('버튼'), onPressed: (){} )
• ElevatedButton(child: Text('버튼'), onPressed: (){} )
• IconButton(icon: Icon(), onPressed: (){} )
• floatingActionButton: FloatingActionButton(child: Text('버튼'), onPressed: (){})

TextField()

글자 입력란

아이콘 넣기

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.star), // prefixIcon, suffixIcon..
  ),
),

테두리, 색 채우기

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.abc),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.lightBlue, width: 2.0),
      borderRadius: BorderRadius.circular(30),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
      borderRadius: BorderRadius.circular(30),
    ),
    border: OutlineInputBorder(),

    filled: true,
    fillColor: Colors.blue.shade50,
  ),
),

placeholder ?

TextField(
  decoration: InputDecoration(
    hintText: 'hintText',
    helperText: 'helperText',
    labelText: 'labelText',
    counterText: 'counterText'
  ),
),

커스텀 위젯

재사용 잦은 UI나 큰 페이지 단위로 커스텀 위젯화

MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: SizedBox( child: Custom() ),
  )
);

class Custom extends StatelessWidget {
  const Custom({super.key});

  @override
  Widget build(BuildContext context) {
    return 따로 뺄 위젯()
  }
}

레이아웃 위젯

• Row(mainAxisAlignment: .., children: [])
• Column(mainAxisAlignment: .., children: [])
• ListView(children: []) SNS 피드 등 긴 목록이 필요할 때 사용 무한 스크롤, 메모리 절약 등 유용함
• Scaffold( appBar: AppBar(title: ..), body: .., bottomNavigationBar: BottomAppBar(..))
• AppBar( title : Text('제목'), leading : Icon(Icons.앱바 최좌측 아이콘), actions : [ Icon(Icons.앱바 최우측 아이콘들), Icon(Icons.-) ])

ListTile()

좌측 그림 + 우측 Text 레이아웃

ListTile(
    leading: Image.asset('assets/coolgam.png'),
    title: Text('멋감'),
)

ListView.builder()

목록 동적 생성

ListView.builder(
    itemCount: list.length(),
    itemBuilder: (context, i) {
        return ListTile(
            leading: Image.asset('assets/coolgam.png'),
            title: Text(list[i]),
        )
    }
)

Flexible()

여러 박스 배치 시 너비/높이를 고정값 말고 비율로 주고 싶을 때

Row(
    children: [
        Flexible(flex: 1, child: Container(color: Colors.amber)),
        Flexible(flex: 2, child: Container(color: Colors.blue)),
    ]
)

→ 각 1 : 2만큼 차지

Expanded()

여러 박스 배치 시 하나의 박스만 남은 가로폭 꽉 차게 만들기

Row(
    children: [
        Expanded(flex: 1, child: Container(color: Colors.amber)),
        Container(width: 50, child: Container(color: Colors.blue)),
    ]
)

박스 위젯

• SizedBox(): width, height만 필요한 박스면 이게 가벼우니 이거 쓰기
• Container(width: 10, height: 10, color: Colors.amber) color를 줘야 눈에 보임 width, height가 안먹는 이유: 위치를 안잡아줘서 Center(child: Container(..)) 등
• Container(width: double.infinity): 박스폭 가로로 꽉차게
• Container(margin: ..): 바깥 여백 근데 이제 EdgeInsets.all(10)이나.fromLTRB(10, 20, 30, 40)` 같이 드럽게 줘야함
• Container(padding: ..): 안쪽 여백 Row, Column 말고 Container에만 여백 줄 수 있음 Row에 여백 주려면 Container로(를) 감싸기 padding을 위한 Padding() 위젯도 존재
• Container(decoration: BoxDecoration(..)) color, boxShadow, borderRadius 등 중요치 않은 박스 스타일 지정
• (복습) Center(child: Container(..)): 중앙정렬
• Align(alignment: Alignment..., child: Container(..)) Alignment 뒤에 bottomLeft 등 넣어 박스 정렬

Bundle ID 생성

• android/app/build.gradle 파일에 있는 applicationId = "com.example.contact_app" 이 기존 Bundle ID
• 프로젝트 생성 시 자동 생성, com.회사명.앱이름 으로 지어주는데 변경 가능
• View > Tool Windows > Terminal dart pub global activate rename 입력
• rename setAppName --targets ios,android --value "com.회사명.앱이름" 입력
• 추후 ios 앱 발행 시 ID에 언더바(_)가 포함되면 문제될 수 있음

.apk 파일 발행

• File > Project Structure
• SDK 버전 선택 > OK
• Build > Flutter > Build APK
• 생성된 .apk 파일을 폰으로 옮기면 바로 설치 가능
• 말고 플레이스토어에 올리려면 아래 과정 따라가기

key 파일 생성

• 터미널에 flutter doctor -v 입력
• Java binary at: 뒤의 주소 중 bin까지 복사
• 경로 중 띄어쓰기 포함되어 있는 곳은 큰 따옴표로 묶어두기
• key 파일 저장할 폴더 하나 만들기 폴더 안의 내용물이 전부 삭제되므로 반드시 새로운 폴더 생성
• 아래 폼에 맞게 입력 후 터미널에 입력

  // 폼
  복사해둔경로\keytool -genkey -v -keystore key파일넣을폴더경로\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload
  

// 예시 C:"Program Files"\Android"Android Studio1"\jbr\bin\keytool -genkey -v -keystore C:\flutter_key\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

- key 비번 입력 후 폴더 경로와 함께 잘 기억해뒀다가
- 현재 프로젝트의 android 폴더 안에 `key.properties` 생성
- 아래 폼에 맞게 입력하고 저장(원(won) 기호 말고 / 사용)

```dart
// 폼
storePassword=입력한비번1
keyPassword=입력한비번2
keyAlias=upload
storeFile=key파일경로/upload-keystore.jks

// 예시
storePassword=123456
keyPassword=123456
keyAlias=upload
storeFile=C:/flutter_key/upload-keystore.jks

• 이번엔 android/app/build.gradle 파일 내 android { 바로 전에 아래 코드 네 줄 붙여넣기

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android { ..

• android {} 안쪽, buildTypes { 바로 전에 아래 코드 여덟 줄 붙여넣기

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
        storePassword keystoreProperties['storePassword']
    }
}

• buildTypes { 안에 debug -> release로 수정

  buildTypes {
    release {
        signingConfig signingConfigs.release
    }
  }

.aab 파일 발행

• Build > Flutter > Build App Bundle
• 이걸 구글 플레이스토어에 등록하면 되는데 이 때 개발자 계정(생성 시 25달러 결제) 필요
• 우선 비공개로 올려서 앱 테스트 가능