backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    backgroundColor: Theme.of(context).colorScheme.inverseSurface,

    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,

if (orientation == Orientation.portrait) ...[
    AuthButton(
        text: 'Use email & password',
    ),
    Gaps.v16,
    AuthButton(
        text: 'Continue with Google',
    ),
],

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp], // 세로 모드로 고정
  );

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); // 다크 모드

  runApp(const TikTokApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Scaffold(
      backgroundColor: Color(0xFFF4EDDB),
      body: Container(),
    ));
  }
}

class Button extends StatelessWidget {
  final String text;
  final Color bgColor;
  final Color textColor;

  const Button({super.key, required this.text, required this.bgColor, required this.textColor,});

  final String name, code, amount;
  final bool isInverted; // 색상 반전 여부

  final _blackColor = const Color(0xFF1F2123);

  (중략)
  color: isInverted ? _blackColor : Colors.white,

  Transform.scale(
    scale: 2.2,
    child: Transform.translate(
      offset: const Offset(-5, 12),

child: Stack(
  alignment: Alignment.center,
  children: [
    Align(
      alignment: Alignment.centerLeft,
      child: icon,
    ),
    Expanded(
      child: Text(
        text,
      ),
    ),
  ],

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Scaffold(
      backgroundColor: Color(0xFFF4EDDB),
      body: Container(),
    ));
  }
}

class _AppState extends State<App> {
  int counter = 0;

  void onClicked() {
    setState(() {
      counter += 1;
    });
  }

  (중략)
        child: IconButton(
          onPressed: onClicked,

  (중략)

          Text(
            '$counter',
          ),

  void getTodaysToons() async {
    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);
  }

  final List<dynamic> webtoons = jsonDecode(response.body);
  for (var webtoon in webtoons) {
    print(webtoon); // webtoon.runtimeType = _JsonMap
  }

  WebtoonModel.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        title = json['title'],
        thumb = json['thumb'];

  List<WebtoonModel> webtoonInstances = [];
  final List<dynamic> webtoons = jsonDecode(response.body);
  for (var webtoon in webtoons) {
    webtoonInstances.add(WebtoonModel.fromJson(webtoon));
  }

class _HomeScreenState extends State<HomeScreen> {
  List<WebtoonModel> webtoons = [];
  bool isLoading = true;

  void waitForWebtoons() async {
    webtoons = await ApiService.getTodaysToons();
    isLoading = false;
    setState(() {});
  }

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

  final Future<List<WebtoonModel>> webtoons = ApiService.getTodaysToons();
  (중략)
  body: FutureBuilder(
    future: webtoons,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return const Text('there is data');
      }
      return const Text('loading...');
    },
  ),

class DetailScreen extends StatefulWidget {
  final WebtoonModel webtoon;
  (중략)
}

class _DetailScreenState extends State<DetailScreen> {
  //final Future<WebtoonDetailModel> webtoonDetail = ApiService.getToonById(widget.webtoon.id);
  late Future<WebtoonDetailModel> webtoonDetail; // initState() 에서 define 예정

  @override
  void initState() {
    super.initState();
    webtoonDetail = ApiService.getToonById(widget.webtoon.id);
  }
  (중략)

return ListView(
  children: [
    for (var webtoon in snapshot.data!) Text(webtoon.title)
  ],
);

return ListView.builder(
  scrollDirection: Axis.vertical, // 스크롤 방향
  itemCount: snapshot.data!.length,
  itemBuilder: (context, index) {
    var webtoon = snapshot.data![index];
    return Text('$index  ${webtoon.title}');
  },
);

return GestureDetector(
  onTap: () {
    print('objects');
  },
  child: Column(
    (생략)

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      DetailScreen(webtoon: webtoon);
    },
  ),
);

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) {
      return DetailScreen(webtoon: webtoon);
    },
    fullscreenDialog: true,
  ),
);

// webtoon_widget.dart > 목록 페이지의 이미지
Hero(
  tag: webtoon.id,
  child: Container(

// detail_screen.dart > 상세 페이지의 이미지
Hero(
  tag: webtoon.id,
  child: Container(

onButtonTap() async {
  final url = Uri.parse("https://www.naver.com");
  await launchUrl(url);
}

// SharedPreferences.getInstance()
final SharedPreferences prefs = await SharedPreferences.getInstance();

// initState() 활용 시 late 변수 지정
late SharedPreferences prefs;

Future initPrefs() async {
  prefs = await SharedPreferences.getInstance();
}

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

await prefs.setInt('counter', 10);
final String? action = prefs.getString('action');

class _UsernameScreenState extends State<UsernameScreen> {
  final TextEditingController _usernameController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _usernameController.addListener(() {
      print(_usernameController.text); // 입력값을 보여줌
    });
  }

      (생략)
      TextField(
        controller: _usernameController,

child: AnimatedDefaultTextStyle(
  // style : 애니메이션화 시키고 싶은 대상
  style: TextStyle(
      color: _username.isEmpty
          ? Colors.grey.shade400
          : Colors.white,
      fontWeight: FontWeight.w600,
    ),
  duration: const Duration(milliseconds: 300),
  child: const Text("Next"),

  late final AnimationController _animationController;

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

    _animationController = AnimationController(
      vsync: this,
      lowerBound: 1.0, // 크기 지정
      upperBound: 1.5, // 크기 지정
      value: 1.5, // default 크기
      duration: _animationDuration,
    );

    _animationController.addListener(() {
      setState(() {});
    });
  }

    child: Transform.scale(
      scale: _animationController.value,

child: AnimatedBuilder(
  animation: _animationController,
  builder: (context, child) {
    return Transform.scale(
      scale: _animationController.value,
      child: child,
    );
  },

  @override
  void dispose() {
    // _usernameController 와 연관된 이벤트 리스너를 모두 지움
    _usernameController.dispose();

    super.dispose();
  }

void _onScaffoldTap() {
  FocusScope.of(context).unfocus();
}

class _LoginFormScreenState extends State<LoginFormScreen> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

(생략)

    child: Form(
      key: _formKey,

  void _onSubmitTap() {
    if (_formKey.currentState != null) {
      if (_formKey.currentState!.validate()) {
        _formKey.currentState!.save();
      }
    }
  }

  TextFormField(
    decoration: const InputDecoration( ~ ),
    validator: _chkTextField,
    onSaved: (newValue) {
      if (newValue != null) formData['email'] = newValue;
    },
  ),

    return Scaffold(
      // screens[_selectedIndex] 로도 작성 가능
      body: screens.elementAt(_selectedIndex),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: [
            NavTab(
              icon: FontAwesomeIcons.house,
              isSelected: _selectedIndex == 0,
              onTap: () => _onNavTap(0),
            ),
            (x4 반복)
          ],
        ),
      ),
    );

final screens = [
  StfScreen(key: GlobalKey()),
  StfScreen(key: GlobalKey()),
  StfScreen(key: GlobalKey()),
  StfScreen(key: GlobalKey())
];

body: Stack(
  children: [
    Offstage(
      offstage: _selectedIndex != 0,
      child: StfScreen(), // GlobalKey 미사용
    ),
  ],
),

return VisibilityDetector(
  key: Key("${widget.index}"),
  onVisibilityChanged: (info) {
    print("${widget.index} is ${info.visibleFraction * 100} Visible");
  },
  child: Stack(

return CustomScrollView(
  slivers: [
    SliverAppBar(
      snap: true, // 살짝만 올라가도 appbar 전체가 바로 보여짐
      floating: true, // 스크롤을 내렸다가 올라가면 다시 보여짐
      stretch: true,
      pinned: true, // FlexibleSpaceBar 를 볼 수 있게 유지
      collapsedHeight : 80,
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        stretchModes: const [
          StretchMode.blurBackground,
          StretchMode.zoomBackground,
          StretchMode.fadeTitle,
        ],
        background: Image.asset(
          "assets/images/kota.jpg",
          fit: BoxFit.cover,
        ),
        title: const Text("Hello!"),
        titlePadding:
            const EdgeInsets.symmetric(horizontal: 0, vertical: 10),
        centerTitle: true,
      ),

    SliverFixedExtentList(
      delegate: SliverChildBuilderDelegate(
        childCount: 20, // 20개 제한
        (context, index) => Container(
          color: Colors.amber[100 * (index % 9)],
          child: Align(
            alignment: Alignment.center,
            child: Text("Item $index"),
          ),
        ),
      ),
      itemExtent: 100, // item 의 height
    ),

    SliverGrid(
      delegate: SliverChildBuilderDelegate(
        childCount: 50, // 50개 제한
        (context, index) => Container(
          color: Colors.blue[100 * (index % 9)],
          child: Align(
            alignment: Alignment.center,
            child: Text("Item $index"),
          ),
        ),
      ),
      // 허용된 만큼의 무한한 grid 를 생성
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100,
        mainAxisSpacing: Sizes.size20,
        crossAxisSpacing: Sizes.size20,
        childAspectRatio: 1,
      ),
    ),

    SliverPersistentHeader(
      delegate: CustomDelegate(),
      pinned: true,
    ),

class CustomDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.lightGreen,
      // FractionallySizedBox : 부모로부터 최대한 많은 공간을 차지
      child: const FractionallySizedBox(
        heightFactor: 1, // 100% (maxExtent)
        child: Center(
          child: Text(
            'SliverPersistentHeader!!!!!',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }

  @override
  double get maxExtent => 150; // 최고 높이

  @override
  double get minExtent => 80; // 최저 높이

  // SliverPersistentHeader 가 보여져야 되는지 알려주는 method
  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // maxExtent, minExtent 변경 시에는 true 반환
    // build 에서 완전히 다른 widget tree 리턴 시 false 반환
    return false;
  }
}

    SliverToBoxAdapter(
      child: Column(
        children: [
          CircleAvatar(
            backgroundColor: Colors.red,
            radius: 20,
          )
        ],
      ),
    ),

final router = GoRouter(
  routes: [
    GoRoute(
      path: SignUpScreen.routeURL, // String 값
      builder: (context, state) => const SignUpScreen(),
      routes: [
        GoRoute(
          path: UsernameScreen.routeURL, // 이때는 슬래시 제거
          builder: (context, state) => const UsernameScreen(),
        ),
      ],
    ),
    GoRoute(
      path: "/users/:username", // parameter 를 받아옴
      builder: (context, state) {
        final username = state.params['username'];
        return UserProfileScreen(username: username!);
      },
    ),
  ],
);

return MaterialApp.router(
  routerConfig: router,

    // router.dart
    GoRoute(
      name: UsernameScreen.routeName,
      path: UsernameScreen.routeURL,

    // sign_up_screen.dart
    context.pushNamed(UsernameScreen.routeName);
    context.goNamed(UsernameScreen.routeName);

    GoRoute(
      path: "/users/:username", // parameter 를 받아옴
      builder: (context, state) {
        final username = state.params['username'];
        final tab = state.params['show'];
        return UserProfileScreen(username: username!, tab: tab!);
      },
    )

    context.push(
      EmailScreen.routeURL,
      extra: EmailScreenArgs(username: _username),
    );

    GoRoute(
      path: EmailScreen.routeURL,
      builder: (context, state) {
        final args = state.extra as EmailScreenArgs;
        return EmailScreen(
          username: args.username,
        );
      },
    ),

    final cameraPermission = await Permission.camera.request();
    final micPermission = await Permission.microphone.request();

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.inactive) {
      _cameraController.dispose();
    } else if (state == AppLifecycleState.resumed) {
      initCamera();
    }
  }

class VideoConfig extends InheritedWidget {
  (생략)
  final bool autoMute = false;

  static VideoConfig of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<VideoConfig>()!;
  }

  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return true;
  }
}

theme: ThemeData(
        primaryColor: const Color(0xFFE9435A),

class VideoConfig extends ChangeNotifier {
  bool autoMute = true;

  void toggleAutoMute() {
    autoMute = !autoMute;
    notifyListeners();
  }
}

AnimatedBuilder(
  animation: videoConfig,
  builder: (context, child) => SwitchListTile.adaptive(
    value: videoConfig.autoMute,
    onChanged: (value) => videoConfig.toggleAutoMute(),

  bool _autoMute = videoConfig.autoMute;

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

    videoConfig.addListener(() {
      setState(() {
        _autoMute = videoConfig.autoMute;
      });
    });
  }

final videoConfig = ValueNotifier(true);

ValueListenableBuilder(
  valueListenable: videoConfig,
  builder: (context, value, child) => SwitchListTile.adaptive(
    value: videoConfig.value,
    onChanged: (value) => videoConfig.value = !videoConfig.value,

class VideoConfig extends ChangeNotifier {
  bool isMuted = false;

  void toggleIsMuted() {
    isMuted = !isMuted;
    notifyListeners();
  }
}

  Widget build(BuildContext context) {
    // VideoConfig ChangeNotifier 를 앱 전체에 제공
    return ChangeNotifierProvider(
      create: (context) => VideoConfig(),
      child: MaterialApp.router(

  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => VideoConfig(),
        ),
      ],
      child: MaterialApp.router(

SwitchListTile.adaptive(
  value: context.watch<VideoConfig>().isMuted,
  onChanged: (value) => context.read<VideoConfig>().toggleIsMuted(),

class PlaybackConfigModel {
  bool muted;

  PlaybackConfigModel({
    required this.muted,
  });
}

class PlaybackConfigRepository {
  static const String _muted = "muted";

  final SharedPreferences _preferences;

  PlaybackConfigRepository(this._preferences);

  // 음소거 관련 데이터 디스크에 저장
  Future<void> setMuted(bool value) async {
    _preferences.setBool(_muted, value);
  }

  // 음소거 관련 데이터 디스크에서 읽기
  bool isMuted() {
    return _preferences.getBool(_muted) ?? false;
  }
}

class PlaybackConfigViewModel extends ChangeNotifier {
  final PlaybackConfigRepository _repository;

  late final PlaybackConfigModel _model = PlaybackConfigModel(
    muted: _repository.isMuted(),
    autoplay: _repository.isAutoplay(),
  );

  PlaybackConfigViewModel(this._repository);

  // _model 은 private 하게 두고 getter 사용
  bool get muted => _model.muted;

  void setMuted(bool value) {
    _repository.setMuted(value); // 디스크에 저장(persist)
    _model.muted = value; // Model 수정
    notifyListeners(); // 데이터를 listen 하고 있는 screen 들에게 전달
  }
}

  // Provider 초기화
  final preferences = await SharedPreferences.getInstance();
  final repository = PlaybackConfigRepository(preferences);

  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(
        create: (context) => PlaybackConfigViewModel(repository),
      ),
    ],
    child: const TikTokApp(),
  ));

class PlaybackConfigViewModel extends Notifier<PlaybackConfigModel> {
  final PlaybackConfigRepository _repository;

  PlaybackConfigViewModel(this._repository);

  @override
  PlaybackConfigModel build() {
    // PlaybackConfigViewModel build => 화면이 갖게 되는 초기 데이터를 return
    return PlaybackConfigModel(
      muted: _repository.isMuted(),
    );
  }

  void setMuted(bool value) {
    _repository.setMuted(value);
    // 상태 변경하면 모든 listener 들이 자동으로 통지 받음
    state = PlaybackConfigModel(muted: value);
  }
}

final playbackConfigProvider =
    NotifierProvider<PlaybackConfigViewModel, PlaybackConfigModel>(
  () => throw UnimplementedError(),
  // SharedPreferences 이 필요해서 PlaybackConfigViewModel(repository) 가 필요한데, 여기에 repository 를 쓸 수 없어서 에러를 내고, main.dart 에서 받아옴
);

final preferences = await SharedPreferences.getInstance();
final repository = PlaybackConfigRepository(preferences);

// 22.1 Riverpod 사용 가능한 환경으로 설정
runApp(
  ProviderScope(overrides: [
    playbackConfigProvider.overrideWith(
      () => PlaybackConfigViewModel(repository),
    ),
  ], child: const TikTokApp()),
);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    (생략)
    SwitchListTile.adaptive(
      value: ref.watch(playbackConfigProvider).muted,
      onChanged: (value) =>
          ref.read(playbackConfigProvider.notifier).setMuted(value),
      title: const Text("Mute video"),
    ),

// StatefulWidget
class VideoPost extends StatefulWidget {
  @override
  State<VideoPost> createState() => _VideoPostState();
}

class _VideoPostState extends State<VideoPost> {}

// ConsumerStatefulWidget
class VideoPost extends ConsumerStatefulWidget {
  @override
  VideoPostState createState() => VideoPostState();
}

class VideoPostState extends ConsumerState<VideoPost> {}

class TimelineViewModel extends AsyncNotifier<List<VideoModel>> {
  List<VideoModel> _list = [VideoModel(title: "First video")];

  @override
  FutureOr<List<VideoModel>> build() async {
    await Future.delayed(const Duration(seconds: 3));
    return _list;
  }

  void uploadVideo() async {
    state = const AsyncValue.loading(); // 강제로 loading state 가 되도록 함
    await Future.delayed(const Duration(seconds: 2));

    final newVideo = VideoModel(title: "${DateTime.now()}");
    _list = [..._list, newVideo];
    state = AsyncValue.data(_list);
  }
}

final timelineProvider =
    AsyncNotifierProvider<TimelineViewModel, List<VideoModel>>(
  () => TimelineViewModel(),
);

  (생략)
  data: (videos) => PageView.builder( // videos : timelineProvider 가 expose 하는 데이터
    controller: _pageController,
    onPageChanged: _onPageChanged,
    itemCount: videos.length,
    itemBuilder: (context, index) => VideoPost(onVideoFinished: _onVideoFinished, index: index),
  ),

  IconButton(
    onPressed: _onUploadPressed,
    icon: ref.watch(timelineProvider).isLoading // state 조회
        ? const CircularProgressIndicator()
        : const FaIcon(FontAwesomeIcons.cloudArrowUp),
  ),

final routerProvider = Provider((ref) {
  GoRouter(

class TikTokApp extends ConsumerWidget {
  const TikTokApp({super.key});
  
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp.router(
      routerConfig: ref.watch(routerProvider),

PS C:\Users\YNJCH\Flutter\tiktok_clone> flutterfire configure
i Found 2 Firebase projects.
✔ Select a Firebase project to configure your Flutter application with · tiktokclone-3260b (TikTokClone)
✔ Which platforms should your configuration support (use arrow keys & space to select)? · web, ios, android
i Firebase android app com.example.tiktok_clone is not registered on Firebase project tiktokclone-3260b.
i Registered a new Firebase android app on Firebase project tiktokclone-3260b.
i Firebase ios app com.example.tiktokClone is not registered on Firebase project tiktokclone-3260b.
i Registered a new Firebase ios app on Firebase project tiktokclone-3260b.
i Firebase web app tiktok_clone (web) is not registered on Firebase project tiktokclone-3260b.
i Registered a new Firebase web app on Firebase project tiktokclone-3260b.

Firebase configuration file lib\firebase_options.dart generated successfully with the following Firebase apps:

Platform  Firebase App Id
web       1:[숫자]:web:[코드]     // ~\tiktok_clone\firebase.json 에 쓰여있는 내용 확인!
android   1:[숫자]:android:[코드]
ios       1:[숫자]:ios:[코드]

Learn more about using this file and next steps from the documentation:
 > https://firebase.google.com/docs/flutter/setup

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

class AuthenticationRepository {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  bool get isLoggedIn => user != null;
  User? get user => _firebaseAuth.currentUser; // 로그인한 사용자는 Nullable
}

final authRepo = Provider((ref) => AuthenticationRepository());

final routerProvider = Provider((ref) {
  return GoRouter(
    redirect: (context, state) {
      final isLoggedIn = ref.read(authRepo).isLoggedIn;
      if (!isLoggedIn) { // 회원가입, 로그인 페이지 제외 접근 불가하도록
        if (state.subloc != SignUpScreen.routeURL &&
            state.subloc != LoginScreen.routeURL) {
          return SignUpScreen.routeURL;
        }
      }
      return null;
    },

class SignUpViewModel extends AsyncNotifier<void> {
  late final AuthenticationRepository _authRepo;

  @override
  FutureOr<void> build() {
    _authRepo = ref.read(authRepo);
  }

  Future<void> signUp() async {
    state = const AsyncValue.loading();
    final form = ref.read(signUpForm);

    state = await AsyncValue.guard(
      () async => await _authRepo.signUp(form["email"], form["password"]),
    );
  }
}

final signUpForm = StateProvider((ref) => {});
final signUpProvider = AsyncNotifierProvider<SignUpViewModel, void>(
  () => SignUpViewModel(),
);

    ref.read(signUpForm.notifier).state = {"email": _email};

    final state = ref.read(signUpForm.notifier).state;
    ref.read(signUpForm.notifier).state = {...state, "password": _password};

    void _onNextTap() {
      ref.read(signUpProvider.notifier).signUp();
    }

class AuthenticationRepository {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  (생략)
  Stream<User?> authStateChanges() => _firebaseAuth.authStateChanges();
}

final authStateStream = StreamProvider((ref) {
  final repo = ref.read(authRepo);
  return repo.authStateChanges();
});

  Map<String, String> toJson() {
    return {
      "uid": uid,
      "email": email,
      "name": name,
      "bio": bio,
      "link": link,
    };
  }

  UserProfileModel.fromJson(Map<String, dynamic> json)
      : uid = json["uid"],
        email = json["email"],
        name = json["name"],
        bio = json["bio"],
        link = json["link"],
        birthday = json["birthday"];

  @override
  Widget build(BuildContext context) {
    return ref.watch(userProvider).when(
          data: (data) => SafeArea(
                          (생략)
                          CircleAvatar(
                            radius: 50,
                            foregroundImage: const NetworkImage(
                              "https://avatars.githubusercontent.com/u/69029517",
                            ),
                            child: Text(data.name),
                          ),

  Future<void> uploadAvatar(File file, String fileName) async {
    final fileRef = _storage.ref().child("avatar/$fileName");
    await fileRef.putFile(file);
  }