우선 위와 같은 화면을 그리기 위해서 Scaffold 내에서 두가지로 나눈다.

1. AppBar
2. Body

그리고 Body - Column 내에서 크게 네가지 영역으로 나누었다.

1. 프로필 영역
2. Text 영역
3. 버튼 영역
4. Tab 영역
   
   

📍 App Bar

appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(widget.title, style: TextStyle(color: Colors.black)),
        leading: IconButton(icon: Icon(Icons.arrow_back_ios, color: Colors.blue), onPressed: () {}),
        actions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.menu, color: Colors.blue))
        ],
      ),

📍 프로필 영역

Expanded(child: Row(
            children: [
              Expanded(child: CircleAvatar(
                radius: 70,
                backgroundImage: AssetImage("images/img1.jpeg"),
              ),flex: 1,),
              Expanded(
                child: SizedBox(
                  height: 100,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text(_name, style : TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                      Text(_job, style : TextStyle(fontSize: 18)),
                      Text(_detail, style : TextStyle(fontSize: 15)),
                    ],
                  ),
                ),
                flex: 1,
              )
            ],
          ),
            flex: 2,
          ),

📍 Post, Likes, Shares 영역

Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("50"),
                      Text("Posts")
                    ],
                  ),
                ),
                Container(height: 50, width: 2, color: Colors.grey),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("10"),
                      Text("Likes")
                    ],
                  ),
                ),
                Container(height: 50, width: 2, color: Colors.grey),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("3"),
                      Text("Shares")
                    ],
                  ),
                )
              ],
            ),
            flex: 1,
          ),

📍 버튼 영역

Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                InkWell(
                  child: Container(
                    height: 50,
                    width: 180,
                    child: Text("Follow",
                    style: Theme.of(context).textTheme.caption?.copyWith(
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),),
                    padding: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onTap: () {},
                ),
                InkWell(
                  child: Container(
                    height: 50,
                    width: 180,
                    child: Text("Message",
                      style: Theme.of(context).textTheme.caption?.copyWith(
                          color: Colors.black,
                          fontWeight: FontWeight.w500
                      ),),
                    padding: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onTap: () {},
                ),
              ],
            ),
            flex: 1,
          ),

📍 Tab 영역

오래걸렸던 부분.. Tab영역! Tabbar와 TabBarView를 각각 Expanded로 묶어 DefaultTabController로 감싸주었다.

Expanded(child: DefaultTabController(
                length: 2,
                initialIndex: 0,
                child: Column(
                  children: <Widget> [
                    Expanded(child: TabBar())
                    Expanded(child: TabBarView())
                    ...

요런식으로!

👉🏼 TabBar

Expanded(
                      child: TabBar(
                        tabs: <Widget> [
                          new Tab(
                            icon: const Icon(Icons.directions_car, color: Colors.black),
                          ),
                          new Tab(
                            icon: const Icon(Icons.train, color: Colors.black),
                          )
                        ]
                      ),flex: 1,
                    ),

👉🏼 TabBarView

Expanded(
                      child: TabBarView(
                        children: <Widget>[
                          new Container(
                            child: GridView.count(
                              padding: const EdgeInsets.all(20),
                              crossAxisSpacing: 10,
                              mainAxisSpacing: 10,
                              crossAxisCount: 3,
                              children: <Widget> [
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                              ],
                            ),
                          ),
                          new Container(
                            child: GridView.count(
                              padding: const EdgeInsets.all(20),
                              crossAxisSpacing: 10,
                              mainAxisSpacing: 10,
                              crossAxisCount: 3,
                              children: <Widget> [
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                              ],
                            ),
                          )
                        ]
                      ),flex: 5,
                    )

그리고 전체 코드 🥁 🎷 🎻 🎸

import 'package:flutter/material.dart';
import 'package:flutter/src/material/colors.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.black
      ),
      home: const MyHomePage(title: 'Profile'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String _name = "Soyun Jo";
  String _job = "Engineer";
  String _detail = "Flutter Developing";


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(widget.title, style: TextStyle(color: Colors.black)),
        leading: IconButton(icon: Icon(Icons.arrow_back_ios, color: Colors.blue), onPressed: () {}),
        actions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.menu, color: Colors.blue))
        ],
      ),
      body:
      Column(
        children: [
          Expanded(child: Row(
            children: [
              Expanded(child: CircleAvatar(
                radius: 70,
                backgroundImage: AssetImage("images/img1.jpeg"),
              ),flex: 1,),
              Expanded(
                child: SizedBox(
                  height: 100,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text(_name, style : TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                      Text(_job, style : TextStyle(fontSize: 18)),
                      Text(_detail, style : TextStyle(fontSize: 15)),
                    ],
                  ),
                ),
                flex: 1,
              )
            ],
          ), flex: 2,
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("50"),
                      Text("Posts")
                    ],
                  ),
                ),
                Container(height: 50, width: 2, color: Colors.grey),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("10"),
                      Text("Likes")
                    ],
                  ),
                ),
                Container(height: 50, width: 2, color: Colors.grey),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("3"),
                      Text("Shares")
                    ],
                  ),
                )
              ],
            ),
            flex: 1,
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                InkWell(
                  child: Container(
                    height: 50,
                    width: 180,
                    child: Text("Follow",
                    style: Theme.of(context).textTheme.caption?.copyWith(
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),),
                    padding: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onTap: () {},
                ),
                InkWell(
                  child: Container(
                    height: 50,
                    width: 180,
                    child: Text("Message",
                      style: Theme.of(context).textTheme.caption?.copyWith(
                          color: Colors.black,
                          fontWeight: FontWeight.w500
                      ),),
                    padding: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onTap: () {},
                ),
              ],
            ),
            flex: 1,
          ),
          Expanded(
              child: DefaultTabController(
                length: 2,
                initialIndex: 0,
                child: Column(
                  children: <Widget> [
                    Expanded(
                      child: TabBar(
                        tabs: <Widget> [
                          new Tab(
                            icon: const Icon(Icons.directions_car, color: Colors.black),
                          ),
                          new Tab(
                            icon: const Icon(Icons.train, color: Colors.black),
                          )
                        ]
                      ),flex: 1,
                    ),
                    Expanded(
                      child: TabBarView(
                        children: <Widget>[
                          new Container(
                            child: GridView.count(
                              padding: const EdgeInsets.all(20),
                              crossAxisSpacing: 10,
                              mainAxisSpacing: 10,
                              crossAxisCount: 3,
                              children: <Widget> [
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                              ],
                            ),
                          ),
                          new Container(
                            child: GridView.count(
                              padding: const EdgeInsets.all(20),
                              crossAxisSpacing: 10,
                              mainAxisSpacing: 10,
                              crossAxisCount: 3,
                              children: <Widget> [
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                                Expanded(
                                  child: Ink.image(image: AssetImage("images/img1.jpeg")),
                                ),
                              ],
                            ),
                          )
                        ]
                      ),flex: 5,
                    )
                  ],
                ),
              ),
              flex: 5,
          ),
        ],
      )
    );
  }
}

아직은 Flutter로 화면을 그린지 얼마 되지 않아 가독성 있는 코드를 작성하기 보다는 우선 장황하더라도 하드코딩 + 빠르게 화면 그리기에 중점을 두고 있다.

화면을 다 그린 와중에도 오류가....ㅎ 넘쳐버려

🌎 Calculator 레이아웃 구성

화면 레이아웃 구성 : 상단바, 디스플레이Textbox, 키패드

이거 왜 시리즈에 저장이 안되냐..

📍 상단바

Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("     Calculator", textAlign: TextAlign.center, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      IconButton(onPressed: () {}, icon: Icon(Icons.close_fullscreen)),
                      IconButton(onPressed: () {}, icon: Icon(Icons.check_box_outline_blank)),
                      IconButton(onPressed: () {}, icon: Icon(Icons.close))
                    ],
                  )
                ],
              ),flex: 1,
          ),

📍 Display

Expanded(
              child:
              Center(
                child: Container(
                  alignment: Alignment.bottomRight,
                  height: 100,
                  width: 300,
                  child:
                  Text(
                    '$_state',
                    textAlign: TextAlign.right,
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 50,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),flex: 3,
          ),

📍 키패드

맥북에서 제공하는 Calculator app 계산기 레이아웃을 참고하여 계산기 레이아웃을 그려보려고 한다.

기능 넣기는 다음주에~!

🌲 Appium 이란?

Appium 이란 🌍
- Appium 이란 Mobile App UI 테스트 자동화를 위해 Server와 Client 연결 및 자동화 라이브러리를 제공하는 프레임워크이다.

🌱 Appium Server의 역할

1️⃣ 클라이언트로부터 연결을 수신받아 세션을 시작한다.

2️⃣ 지시받은 행위(세션)를 수행시켜준다.

3️⃣ 수행 후 결과를 알려준다.

앱피움에 대해 간단하게 알아보았으니,자동화 개발 환경을 구축해보자.

🌲 자동화 환경 세팅

📌 개발환경 - MacOS Intel chip

🌱 JDK 설치 및 환경변수 설정

우선 안드로이드 스튜디오를 설치하기 전, Oracle 페이지에서 JAVA를 설치해야한다.

링크의 🔗 홈페이지에서 Mac OS용 알맞은 JDK 버전을 설치하고

설치 경로를 확인해준 후, 아래와 같이 Terminal에서 환경변수 설정을 통해 java home 경로를 추가해준다.

% vi ~/.zshrc

export JAVA_HOME=/Library/JAVA/JavaVirtualMachines/[jdk file 설치 version]/Contents/Home     //JDK 설치 경로
export PATH=${PATH}:$JAVA_HOME/bin

저장 후, source로 적용 > 제대로 적용되었는지 echo로 불러 확인한다.

% source ~/.zshrc
% echo $JAVA_HOME
/Library/JAVA/JavaVirtual<achines/jdk-17.0.1.jdk/Contents/Home

1) Android Studio 설치

다음 순서는 Android SDK 설치이다.

Android SDK는 Emulator 실행 뿐만 아니라, Real Android Device 연결 및 디버깅, 어플리케이션 설치, 시스템 로그 출력, shell 접속 등의 기능을 위해 사용된다.

🔗 Android Studio 홈페이지에서 Android Studio를 설치해주면 된다.

그리고 위처럼, 설치 경로를 확인한 후 환경변수 설정을 통해 다음과 같이 경로 추가~

%vi ~/.zshrc

export ANDROID_HOME=/Users/soyunjo/Library/Android/sdk  //안드로이드 스튜디오 설치 경로
export PATH=${PATH}:$ANDROID_HOME/platform-tools
export PATH=${PATH}:$ANDROID_HOME/tools
export PATH=${PATH}:$ANDROID_HOME/emulator
export PATH=${PATH}:$ANDROID_HOME/build-tools/32.0.0

& 위와 동일하게 source 적용 > echo로 경로 설정이 잘 되었는지 확인해본다!

2-1) Emulator 실행

어플리케이션 실행을 위해 Emulator를 실행해보자.

Android Studio를 실행한 후

SDK Manager > Appearance&Behavior > Android SDK 에서 실행하고자 하는 버전 플랫폼을 다운받는다.

AVD Manager > Creat Virtual Device를 통해 실행하고자 하는 디바이스를 선택하여 에뮬레이터를 생성한다.

이렇게 Virtual Device가 생성되고, Terminal에서도 아래와 같이 Emulator list를 확인할 수 있다.

Android Virtual Device Manager 창에서 Actions 버튼을 누르게되면 Emulator를 통해 Virtual Device가 실행된다.

(또는, Terminal에서 아래 명령어를 통해 실행할 수도 있다.)

이후 위와 같이 Emulator가 실행되었다면, adb devices 명령어를 통해 현재 실행 중인 (연결되어 있는) Android Device 목록이 출력되는지 확인하면 끝!

2-2) Real Device 연결

Real Device를 연결하기에 앞서, 디바이스에서 설정해 주어야 하는 것이 몇가지 있다.

Device 설정에서 > 📍 USB 연결 설정은 PTP(Picture Transfer Protocol)로 선택 📍개발자 모드 활성화 📍UBS 디버깅 활성화

해당 설정을 완료한 후, USB로 Device를 연결하고 Terminal에서 현재 실행중인 Android Device 목록을 확인하게 된다면, 정상 연결이 된 것!

3) Appium + Appium Inspector 설치

이제, 가장 중요한 Appium 설치 순서가 왔다!

🔗 Appium 설치 페이지

해당 페이지에서 Appium을 설치하고, 아래 명령어들을 통해 Set up을 실행한다.

Appium Server는 클라이언트로부터 HTTP를 통해 JSON 객체 형식으로 연결을 받아 세션을 생성하고 Node.js로 작성되기 때문에, 아래와 같이 Node를 설치해주어야 한다.

set up process를 거치고, Appium-doctor를 설치해 Appium Test 진행 조건에 부합하는지 확인해본다!

% npm install -g appium-doctor

여기서 Warning 메시지가 나온다면, 해당 메시지에 따라 필수 프로그램을 설치하거나 수정해주면 된다.

위처럼 appium 실행 환경이 제대로 구축이 되었다면, pass~

Appium 실행 모습

다음으로, Appium Inspector를 설치해본다.

이전 버전에서는 Appium 자체에 Inspector가 포함되어 있었지만,

현재 버전에서는 별도로 받아주어야 하기 때문에 홈페이지에서 appium-inspector.dmg 파일을 별도로 받아 설치한다.

Appium Inspector 실행해보면 끝~~

이로써 Appium Test 자동화 환경 구축 완료~~ 👻

그래서 App Test Automation을 진행할 때, 영역에 따라 각각 Native / Webview에 맞춘 Script를 작성한다면 영역에 따라 Test 세션 속도를 좀 더 빠르게 할 수도 있다.

👉🏼 Context switch 를 통해 Webview로 자동화 전환하기

우선 driver.context 를 통해 현재 노출되는 화면에서의 view contexts 리스트를 리턴받는다.

예를 들어 현재 노출되는 영역이 Native 영역으로만 구성되어 있다면

context의 id list 값은 다음과 같다.

context = driver.contexts

>> context = ['NATIVE_APP']

또한, 현재 노출되는 영역이 Native + Webview 으로 구성되어 있다면

context == driver.contexts

>> context = ['NATIVE_APP', 'WEBVIEW_1']

이런식으로 값이 리턴될 것이다.

Webview context를 사용하게 되면, Selenium commands를 사용할 수 있다는 이점이 있다. 

get("http://some.url.com")와 같은..~ 

해당 값을 받으면 session을 진행하는 영역에 따라 context를 수행해주면 된다!

appview = driver.contexts[0]
webview = driver.contexts[1]

# webview로 session변환
driver.switch_to.context(webview)

# web session 진행 ~~
driver.find_element(By.XPATH, "//button[contains(text(), '장바구니')]").click

# 다시 appview로 컴백!
driver.switch_to.context(appview)

#app session 진행 ~~
driver.find_element(AppiumBy.ID, 'ID placeholder').sendkeys(ID)
driver.quit()

그리고 Webview context에서 session을 시작할 때, 자동으로 webview context 전환해 주는 setting이 따로 있다고 하는데

Desired capabilitiy 중 autoWebview == true 값으로 setting 해놓으면 가능하다고 한다.

자세한건 🔗 Appium documentation 참고 ❗️

숫자, Increment 기능만 있는 화면이 그려져 있다.

요 기능에 Decrement, reset 버튼을 삽입해보려고 한다.

🌎 Counter 기능 완성하기

<결과 화면>

✔️ Increment btn > click : 숫자 + 1 ✔️ Decrement btn > click : 숫자 - 1 ✔️ Reset btn > click : 숫자 => 0

📍Decrement, Reset 함수 추가해주기

 int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });

내장되어 있는 void 함수는 increment 만 존재한다..!

그래서 아래와 같이 Decrement, Reset 함수도 차례로 추가해준다.

   void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  void _resetCounter(){
    setState(() {
      _counter = 0;
    });
  }

그리고 본래 있던 increment floatingActionButton 을 > refresh button 으로 바꾸어주고,

decrement, increment RaisedButton 을 아래에 추가해준다.

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RaisedButton(
                  onPressed: _decrementCounter,
                  child: Text("decrement"),),
                RaisedButton(
                  onPressed: _incrementCounter,
                  child: Text("Increment"),),
            ],)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _resetCounter,
        tooltip: 'Reset Counter',
        child: Icon(Icons.refresh)
      ),
    );
  }

위와 같이 작성하면,, 아래와 같은 화면 완성 ~~ 🥁

앱 화면 내에 행과 열을 나누고, 그 안에 버튼으로 레이아웃을 구성할것이다.

내가 만들고자 했던 결과는!

👏

매우 간단해보이지만, 첫 코드 작성이엇기에 아예 처음 세팅되어 있는 카운터 예제 구조도 이해 못한 나로서는 살짝 어려웠다..

🌎 위젯으로 화면 그리기

우선, 행렬을 나누는 레이아웃 버튼을 구성하기 위해서는 아주 많은 방법들이 있지만. body를 column으로 나누어 준 후, 해당 column에서 row를 구성해주는 방법을 사용했다.

플러터 문서에서 소개하는 가장 기본적인 위젯 목록은 다음과 같다.

• Container
• Column, Row
• Image
• Text
• Icon
• RaisedButton
• Scaffold
• AppBar

Scaffold는 flutter의 도화지(?) 와 같은 가장 베이스로 깔리는 화면이라고 한다. 이 위젯들 중에서, Scaffold내에 AppBar, Column, Row를 사용할 것이다.

📍Column : TextButton Children 구성하기

우선 4개의 column을 만들고, 6개의 버튼과 ads 버튼을 위한 하나의 넓고 얇은 버튼을 만들려고 한다. 그러기 위해서는 우선 4개의 column을 만들어야겠지?

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(children: [
        Expanded(child: child),
        Expanded(child: child),
        Expanded(child: child),
        Expanded(child: child)
      ],
      )
    );
  }

가득 찬 row를 만들고 싶어서 우선 expended 위젯을 추가해주었다. 이후 expended 내의 child로 TextButton을 넣어준다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(children: [
        Expanded(child: Expanded(
          child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("button1"))))),
        Expanded(child: Expanded(
            child: TextButton(
                onPressed: () {},
                child: const Center(child: Text("button1"))))),
        Expanded(child: Expanded(
            child: TextButton(
                onPressed: () {},
                child: const Center(child: Text("button1"))))),
        Expanded(child: Expanded(
            child: TextButton(
                onPressed: () {},
                child: const Center(child: Text("button1")))))
      ],
      )
    );
  }

이까지 하고, Run 시켜주면 다음과 같이 같은 너비의 column 4개가 그려진다.!

📍Row 위젯 삽입하기

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(children: [
        Expanded(child: Row(children: [
          Expanded(child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("Button1")))),
          Expanded(child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("Button2"))))]
        )),
        Expanded(child: Row(children: [
          Expanded(child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("Button3")))),
          Expanded(child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("Button4"))))]
        )),
        Expanded(child: Row(children: [
          Expanded(child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("Button5")))),
          Expanded(child: TextButton(
            onPressed: () {},
            child: const Center(child: Text("Button6"))))]
        )),
        Expanded(child: Expanded(child: TextButton(
          onPressed: () {},
          child: const Center(child: Text("ads"))
        )))]
      )
    );
  }

📍Column button 너비/비율 지정하기

마지막 column의 textbutton은 얇게 ad 자리로 설정하고 싶으니까, 3:3:3:1의 비율로 설정하기 위해 flex를 사용하여 column expended 안에 다음과 같이 설정해준다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Expanded(
            child: Row(children: [
              Expanded(child: TextButton(
                  onPressed: () {},
                  child: const Center(
                      child: Text("Button")))),
              Expanded(child: TextButton(
                  onPressed: (){},
                  child: const Center(
                      child: Text("Button"))))
            ]),
            flex: 3,
          ),
          Expanded(
            child: Row(children: [
              Expanded(child: TextButton(
                  onPressed: () {},
                  child: const Center(
                      child: Text("Button")))),
              Expanded(child: TextButton(
                  onPressed: (){},
                  child: const Center(
                      child: Text("Button"))))
            ]),
            flex: 3,
          ),
          Expanded(
            child: Row(children: [
              Expanded(child: TextButton(
                  onPressed: () {},
                  child: const Center(
                      child: Text("Button")))),
              Expanded(child: TextButton(
                  onPressed: (){},
                  child: const Center(
                      child: Text("Button"))))
            ]),
            flex: 3,
          ),
          Expanded(
            child: TextButton(
                onPressed: () {},
                child: const Center(
                    child: Text("Ads"))),
            flex: 1,
          )
        ],
      )
    );
  }

이상 완성 ~

막상 해보니까 레이아웃 구성하는게, 재밌기도 했다. 근데 이제 동작 구현하고.. 함수가 들어가게 되면 얼마나 어려워질까 ..? ㅎㅎ

그리고, 백번 책보고 이론 확인하고 dart 문법 보고 하는 것 보다 이런식으로 한번 그림을 그려보는게 확실히 이해에 도움이 된다는 걸 알게 되었다..!

멘땅에 해딩 짱..! ⚽️

첫번째 포스팅 으로, ios, android 크로스 플랫폼 앱개발 플랫폼인 flutter 개발환경 구축에 대해 작성하려 한다.

참고로 나으 개발 환경 is 👉 MacOS intel chip

🌏 개발 환경 구축 시작 🌏

Flutter 개발 환경 구축을 위해서는

• Flutter SDK 설치
• Android Studio 설치
• 환경 변수 설치
• flutter doctor 실행

요것만 호다닥 진행하면 끝.

📍첫번째, Flutter SDK 설치

쉽다.

바로 여기.click 👉 https://docs.flutter.dev/get-started/install

들어가면, 다음 화면이 나온다. 플러터를 다운받으려면 이렇게 저렇게 어쩌구 설정을 해야해~라고 설명해주는 페이지가 나온다.

응 그냥 내려가서 Get the Flutter SDK > intel chip 버전 flutter_macos_version-stable.zip 다운로드.
받으면 다운로드 폴더안에 Flutter.zip 파일이 생기는데, 풀고 싶은 곳에 풀어주면 된다.

나같은 경우 User > soyunjo 폴더에 풀어놓음.

📍두번째, Android Studio 설chi하기

다음언 Android Studio 설치 이것두 쉽다. 바로 여기.click 👉 https://developer.android.com/studio 이용약관 정독해주구~ Intel chip 찾아서 click 앤드 Download.

해당 화면에서 좌측 Plugins 를 클릭해준다.

Flutter 검색 후, Install 완료!

이외에도 다양한 코드 색 테마 플러그인이나, 다양한 플러그인들이 많아서, 이거 찾아보고 세팅하는 것도 제법 쏠쏠할 것 같다.

다음,

Android SDK Command-line Tools 선택 > Apply > OK

이렇게 두번째 Step도 완료!

📍세번째, 환경변수 설정하기

다음다음~ shell 에서의 간편한(?) flutter 명령어 사용을 위해 환경변수를 설정해준다.

참고로 zsh 기준❗️

vi ~/.zshrc

텍스트 편집기를 통해서 환경변수를 편집

텍스트가 추ㅏ라라라 뜨면, i 를 통해 편집모드로 바꾸고

flutter를 설치해준 경로❗️를 입력한다. (아까 flutter 압출 풀어 준 경로.)

export PATH="$PATH:$HOME/flutter/bin"

그리고 환경 변수 편집이 모두 끝났으면 :wq 를 입력해서 저장하기.

source ~/.zshrc

source 명령어로 한번 적용시켜주기.

이제 거의 끝났다. doctor를 통해 검증받을 시간. (개발에 필요한거 다~ 설치되었나..)

flutter doctor

✔️ flutter 깔렸고. ✔️ android tool 깔렸고, ✔️ Xcode (ios 같이 할거면 설치해주면 됨. from Appstore ) ✔️ Chrome 깔아주어야하구요 ✔️ ...등등 입니다.

No issues found! 라고 나왔다면. flutter 개발환경 세팅 완료 🌻

하지만, 맥북 프로 터치바를 사용하고 난 후, 살짝 이모지 사용 욕심😏이 생겼달까/

근데 이 얇디 얇은 터치바로 언즤 다 넘기고 찾고 앉아있어..!

그래서 이모지를 순식간에 찾을 수 있는 단축키를 가지고왔다.
it's 바로

👉 control + command + spacebar

조고만 이모지 목록이 뜨게 된다. 미소 짓는 눈으로 키스하는 얼굴 ㅋㅋㅋㅋㅋㅋㅋㅋ?? (뿌듯해하는 얼굴인줄 알고 막날렸는데.. 키스하는 얼굴이었어..? 🫠 이런...)

검색 기능도 되어서 터치바를 휘휘 돌리는 것 보다는 훨씬 편한 듯 하다.

영어로 하면 더 정확하게 나올 것 같아서 해봤는데, 맥북은 영어로 이모지 검색이 안된다.

🤔 요상하네

무튼 Emoji 단축키 사용 방법 끗!!

단축키 백틱(`)으로 해당 기능을 사용할 수 있다고 한다.

하지만 어디있음?

맥북에는 그 어디에도 백틱이 표시된 키보드가 없는걸..? 🥲

했는데,

응, 바로 이거래..

백틱을 사용하는 방법은 두가지가 있다.

🔑 첫번째 방법..

👉 한영키 한글이 ON되어 있을 때❕

• option + ₩ 을 누른다.

🔑 두번째 방법

👉 한영키 영어가 ON 되어 있을 때❗️

• ₩ 을 누른다.

이렇게 간단한건데 몰랐구나. 🫠

이제라도 알았으니 정말 편하겠어 ㅎ후

취미로 시작해 점차 영역을 넓혀가 내가 원하는 걸 만들고 이뤄내고 싶다 🔥

기록하자 꼬옥.