ProfileApp - 풀이

1.theme

[ 일반 컬러랑 메티리얼 컬러의 차이점 ]

메터리얼 컬러 -> 좀 더 연한 빨강, 좀 더 진한 빨강 막 이런... 더 여러가지 색 사용 가능
색상을 하나만 표현하지 않는다!  

메테리얼 컬러만 지원.
테마로 적용하면 모든게 다 적용되니까... 테마에 적용한 것임 
테마 설정하면 위젯을 만들때 스코필드의 뼈대 테마들을 한방 적용 가능! -> 편해서 씀!
일단 우린 앱의 메인 색상과(primarySwatch)와 appBarTheme 적용 가능하다는 것만 알자
나중에 하나하나씩 적용해보자 

• primary switch : app의 메인 컬러

• 색깔 진하게 하기

• 내가 만든 메터리얼 컬러

• 테마로 적용 → 모든 페이지에 적용됨

2.

• endDrawer :

• drawer

leading이 나와야 드로우(저 파란거)가 나옴 

3.

위젯이 자기 속성으로 사이즈를 안들고 있으면 SizedBox를 사용해서 크기를 주면 된다.
그러나 이렇게 사이즈를 딱 박아버리면 재사용 불가능! 재사용할 수 있게 적어야함

재사용 위해 빼주기 

디폴트값 100을 넣어줌. 디폴트값을 설정해줬기에 required 필요없음! 

이것이 재사용 가능한 컴퍼넌트
컴퍼넌트가 엄청나게 많겠죠? -> 페이지 별로 컴퍼넌트를 관리함. 공통 컴퍼넌트도 있겠고... 

• 버튼 크기를 사이즈 박스로 감싸서 조절함

import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_buttons.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.dart';
import 'components/profile_tab.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme(),
      home: ProfilePage(),
    );
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: ProfileDrawer(),
      appBar: _buildProfileAppBar(),
      body: Column(
        children: [
          SizedBox(height: 20),
          ProfileHeader(),
          SizedBox(height: 20),
          ProfileCountInfo(),
          SizedBox(height: 20),
          ProfileButtons(),
          Expanded(child: ProfileTab()),
        ],
      ),
    );
  }

  AppBar _buildProfileAppBar() {
    return AppBar();
  }
}

import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_buttons.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.dart';
import 'components/profile_tab.dart';
import 'components/profile_tap2.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme(),
      home: ProfilePage(),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: ProfileDrawer(),
      appBar: _buildProfileAppBar(),
      body: Column(
        children: [
          SizedBox(height: 20),
          ProfileHeader(),
          SizedBox(height: 20),
          ProfileCountInfo(),
          SizedBox(height: 20),
          ProfileButtons(),
          // 남아있는 세로 공간을 모두 차지하기 위해 Expanded를 준다
          Expanded(child: profile_tab2(),
          ),
        ],
      ),
    );
  }

  AppBar _buildProfileAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Column(
        children: [
          TabBar(
            tabs: [
              Tab(icon: Icon(Icons.car_crash)),
              Tab(icon: Icon(Icons.car_rental)),
            ],
          ),
          Expanded(
            child: TabBarView(
              children: [
                GridView.builder(
                  gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                  ),
                  itemBuilder: (context, index) {
                    return Image.network(
                        "https://picsum.photos/id/${index + 1}/200/200");
                  },
                ),
                Container(
                  color: Colors.red,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}