주니어 개발자 모몽'-'

CSS란?

momong'-' — Mon, 8 Apr 2024 11:09:26 +0900

CSS 의미, 정의

CSS(Cascading Style Sheet)

cascading: 위에서 아래로 흐르는 느낌.

Style

Author Style
- 우리가 사용하는 CSS 파일
User Style
- 사용자의 취향에 맞게 브라우저에서 변환한 Style
Browser
- Browser에서 정의한 Style

우선순위: Author > User Style > Browser

!important 가장 최우선으로 적용

Selectors(선택자)

Universal	* (all)
type	Tag
ID	#id
Class	.class
state	:
Attribute	[]

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

CSS 게임으로 알아보기

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

스타일링

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

display

inline: 물건 자체만을 꾸며줌. 물건의 크기에 맞춰 변경.

inline-block: 한줄에 여러개 넣는데 상자로 변환되어서 지정한 width, height에 맞춰 표기

block: 한줄에 하나씩 표기되는 상자

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

position

relative: 원래 있어야 하는 아이템에서 옮겨간 것(default)

absolute: 내가 담겨 있는 상자 안에서 옮겨간 것

fixed: 상자를 벗어나서 페이지 상에서 옮겨간 것

sticky: 원래 있어야 하는 아이템 자리 그대로. 스크롤 영향을 받지 않음.

헷갈리는 컨셉

CSS 꽃: FlexBox

float

이미지와 텍스트를 어떻게 배치하는 용도

left, center, right

container-item

container	item
display flex-direction flex-wrap flex-flow justify-content align-items align-content	order flex-grow flex-shrink flex align-self

중심축을 어디에 두냐에 따라 달라짐.

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

100%: 부모 높이의 100%

100vh: 부모에 상관없이 보이는 화면의 100%를 사용.

display: flex

flex-direction

row(기본값) 왼쪽 -> 오른쪽

row-rverse: 오른쪽 -> 왼쪽

column: 위 -> 아래

column -rverse: 아래 -> 위

flex-wrap

nowrap(기본값): 무조건 한줄에 item이 나열됨.

wrap: 화면에 맞게 item들이 나열됨.

wrap-reverse: 아래서부터 화면에 맞게 item들이 나열됨.

felx-flow(flex-direction + flex-wrap)

row nowrap

jusify-content

flex-end: item 순서는 유지한채 아래에 배치.

space-around

space-evenly

spave-between: 중간에만 공백

align-items

baseline

align-content

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

flex-grow:items이 늘어날때 비율 설정 가능, 0(기본값)

flex-shrink: items이 줄어드는 비율 설정 가능 , 0(기본값)

flex-basis: items 커질때도, 작아질때도, 퍼센트로 설정가능, auto(기본값)

align-self: item중 item 개별로 수정하고 싶을때 사용

[Flutter] 인스타그램 클론 생성하기 - 3 Home Page 화면 만들기, Flutter Inspector 사용법

momong'-' — Wed, 17 May 2023 14:51:14 +0900

화면설계 - Home Page UI

Home Page는 Column을 생성한다.

Column안에 Text, Card를 생성한다.

Card안에 또 Column을 생성한 후 Image, Text, Row를 생성한다.

Row안에 Image List를 넣는다.

Flutter Inspector

: Flutter 위젯 트리를 시각화하고 탐색하기 위한 도구.

위젯 컨트롤부터 레이아웃까지 모든 항목을 블록으로 사용해 유용하게 사용되는 도구이다.

https://docs.flutter.dev/tools/devtools/inspector

Using the Flutter inspector

Learn how to use the Flutter inspector to explore a Flutter app's widget tree.

docs.flutter.dev

Android Studio 프로그램 오른쪽을 보면 Flutter Inspector 탭이 보인다.

여기를 클릭하여 좀 더 편하게 디자인을 할 수 있다.

Show guidelines

위 버튼을 클릭 시 위젯 레이아웃을 잘 볼 수 있도록 도와준다.

아래 코드로 활성화 가능하다.

import 'package:flutter/rendering.dart';

void showLayoutGuidelines() {
  debugPaintSizeEnabled = true;
}

Home Page 구현

UI 설계한대로 Column 안에 Text, Card를 만들고

Card 안에 Column과 Text, Row 등을 만든다.

그리고 중간중간 SizedBox를 이용해 공백 공간을 만들어 자연스럽게 만들어준다.

일단 하드코딩으로 글 모두 생성 후 나중에 데이터 불러오도록 변경할 예정

결과

소스코드

home_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Instagram Clone'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 20),
              const Text('Instagram에 오신 것을 환영합니다.', style: TextStyle(fontSize: 24)),
              const SizedBox(height: 20),
              const Text('사진과 동영상을 보려면 팔로우하세요'),
              const SizedBox(height: 20),
              Card(
                elevation: 4.0,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    children: [
                      const SizedBox(
                        width: 80,
                        height: 80,
                        child: CircleAvatar(
                          backgroundImage: NetworkImage('https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/resize/416/quality/80/optimize'),
                        ),
                      ),
                      const SizedBox(height: 8),
                      const Text('momong@instagram.com',
                        style: TextStyle(
                          fontWeight: FontWeight.bold
                        ),
                      ),
                      const Text('모몽'),
                      const SizedBox(height: 8),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.network('https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/resize/416/quality/80/optimize',
                            width: 70,
                            height: 70,
                            fit: BoxFit.cover
                          ),
                          const SizedBox(width: 4),
                          Image.network('https://pbs.twimg.com/media/Fo0CQVeacAAuLmz?format=jpg&name=4096x4096',
                            width: 70,
                            height: 70,
                              fit: BoxFit.cover
                          ),
                          const SizedBox(width: 4),
                          Image.network('https://img.hankyung.com/photo/202209/01.31260157.1.jpg',
                            width: 70,
                            height: 70,
                              fit: BoxFit.cover
                          ),
                        ],
                      ),
                      const SizedBox(height: 8),
                      const Text('Facebook 친구'),
                      const SizedBox(height: 8),
                      ElevatedButton(
                        onPressed: () {},
                        child: const Text('팔로우'),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ));
  }
}

https://github.com/LeeYoonJung/InstagramClone

GitHub - LeeYoonJung/InstagramClone: Instagram Clone (인프런 Flutter 강의)

Instagram Clone (인프런 Flutter 강의). Contribute to LeeYoonJung/InstagramClone development by creating an account on GitHub.

github.com

[Flutter] 인스타그램 클론 생성하기 -2 네비바 클릭 시 화면 전환 기능 구현

momong'-' — Tue, 16 May 2023 14:01:22 +0900

화면설계

Tab Page에 네비바가 존재하고, Home Page, SearchPage, Account Page가 있다. 각 메뉴를 클릭하였을 경우 각 페이지로 이동되도록 구현한다.

일단 화면이 이동되는 것만 구현해두고, 각 페이지는 다음에 차근차근 변경할 예정이다.

bottomNavigationBar: 하단에 있는 네비게이션 바

bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 선택된 네비게이션바 아이템 Index
        onTap: (index) { // 클릭이벤트
          setState(() {
            _currentIndex = index; // 클릭한 네비게이션바 아이템을 현재 Index로 지정.
          });
        },
        items: const [ // 네비게이션 바 리스트
          BottomNavigationBarItem(
            icon: {아이콘},
            label: {라벨명},
          ),
        ],
      )

TabPage에서 클릭이벤트를 줘 클릭시 선택된 네비아이템이 표시되게 한다.

인스타그램 클론 네비게이션바기능구현

소스코드

tab_page.dart

import 'package:flutter/material.dart';
import 'package:instagram_clone/tab/account/account_page.dart';
import 'package:instagram_clone/tab/home/home_page.dart';
import 'package:instagram_clone/tab/search/search_page.dart';

class TabPage extends StatefulWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _currentIndex = 0;

  final _pages = const [
    HomePage(),
    SearchPage(),
    AccountPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'home',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'search',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'account',
          ),
        ],
      ),
    );
  }
}

네비게이션바 아이템을 클릭시 body 내용이 변할 수 있도록, 네비바 아이템과 body안 페이지 리스트 갯수를 맞춰 코드를 설계한다.

home_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        title: const Text('Instagram Clone'),
      ),
      body: Column(
        children: [
          Text('Instagram에 오신 것을 환영합니다.')
        ],
      )
    );
  }
}

search_page.dart

import 'package:flutter/material.dart';

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

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

account_page.dart

import 'package:flutter/material.dart';

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

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

https://github.com/LeeYoonJung/InstagramClone

GitHub - LeeYoonJung/InstagramClone: Instagram Clone (인프런 Flutter 강의)

Instagram Clone (인프런 Flutter 강의). Contribute to LeeYoonJung/InstagramClone development by creating an account on GitHub.

github.com

[Flutter] StatelessWidget 자동완성시 import 넣기(stless), 자동완성 코드 구현하기(Live Template)

momong'-' — Mon, 15 May 2023 15:07:51 +0900

StatelessWidget 생성 시 자동 import가 안되어 직접 import 기능을 넣어야 하는 번거로움이 있다.

자동 완성 코드를 수정하는 방법이다.

Android Studio 왼쪽 상단 탭에서

File > Settings를 들어간다.

Editor > > Live Template에 들어간 뒤

Flutter 아래 stless가 있다.

Template text를 보면 import가 없는 것을 확인할 수 있다.

맨 위에 아래 코드를 삽입한다.

import 'package:flutter/material.dart';

stless 입력 시 자동완성 코드

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder($END$);
  }
}

$NAME$은 변수이다.

자동완성 된 코드를 보면 처음에 네모박스로 커서가 깜빡이는데 원하는 코드를 입력하고 엔터를 치면 $NAME$ 들어간 부분에 동일하게 작성된다.

수정 후 OK를 클릭한다.

그 다음 자동완성할 경우 import가 같이 자동완성되는 것을 확인할 수 있다.

[Flutter] 인스타그램 클론 생성하기 - 1 화면 설계 및 프로젝트 생성

momong'-' — Fri, 12 May 2023 16:48:16 +0900

화면설계

로그인 했을 경우와 안했을 경우 다른 화면이 뜰 수 있도록

RootPage를 최초페이지로 두고 경우에 따라 Login Page 또는 Tab Page가 나오도록 설정

프로젝트 생성

왼쪽 상단 탭 File > New > New Flutter Project...를 선택하여 프로젝트를 생성한다.

SDK 위치 확인하기

SDK 설치방법

2023.04.26 - [Study/소소한 팁] - [Flutter] 플러터 설치 및 환경설정(Windows)

[Flutter] 플러터 설치 및 환경설정(Windows)

Flutter 설치방법 플러 설치 링크 https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. flut

codingmomong.tistory.com

프로젝트 이름 설정 후 Create를 눌러 프로젝트를 생성한다.

프로젝트 생성 후 lib 디렉토리 아래 화면별로 Directory를 생성한다.

Direcotory는 원하는 위치에서 마우스 우클릭 > New > Directory를 클릭하여 생성한다.

위 사진과 같이 Directory와 dart파일을 생성해둔다.

Tab Page 생성하기

main.dart

import 'package:flutter/material.dart';

import 'tab/tab_page.dart';

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

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

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

tab_page.dart

import 'package:flutter/material.dart';

class TabPage extends StatefulWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'home',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'search',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'account',
          ),
        ],
      ),
    );
  }
}

main에서 Tab Page로 연결되게 만들었다. 로그인 기능은 나중에!!

Tab Page 하단에는 home, search, account 세개 네비바가 존재하도록 만들었다.

결과

https://github.com/LeeYoonJung/InstagramClone

GitHub - LeeYoonJung/InstagramClone: Instagram Clone (인프런 Flutter 강의)

Instagram Clone (인프런 Flutter 강의). Contribute to LeeYoonJung/InstagramClone development by creating an account on GitHub.

github.com

[Flutter] Unhandled Exception: Connection refused 오류 해결 방안

momong'-' — Wed, 3 May 2023 10:50:11 +0900

에러메세지

Unhandled Exception: Connection refused

오류 원인

API 도메인 주소를 localhost로 사용으로 발생한 오류이다.

안드로이드 애뮬레이터 사용 시 컴퓨터 환경이 아닌 모바일 환경에서 작동중인 것이므로 localhost를 사용하면 접근이 거부되어 오류가 발생한다.

수정방안

ip 주소로 변환해야 한다.

// 기존
http://localhost:8080/

// 변경
http://192.168.0.1:8080/

자신의 ip주소(IPv4 주소)는 cmd에 들어가서 ipconfig (iOS일 경우 ifconfig)명령어를 사용해서 확인할 수 있다.

[Flutter] Flutter 시작하기 및 기본 샘플 앱 설명

momong'-' — Tue, 2 May 2023 16:24:28 +0900

Flutter Project 시작하기

Scaffold, AppBar

flutter Project를 생성하면 최초로 main.dart 코드가 실행된다.

Scaffold안에 appBar와 body가 존재한다.

appBar는 화면 상단에 있는 파란색 Bar이고, body는 나머지 하얀 화면이다.

appBar와 body에 hello world를 입력해서 출력해봤다.

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('HelloWorld'),
          ),
          body: Text(
              'Hello World',
              style: TextStyle(fontSize: 30),
          )),
    );
  }
}

StatelessWidget

상태가 없는 위젯. 화면이 변경될 소지가 없은 위젯

StatefulWidget

stful 입력 시 자동완성 된다.

위 사진과 같은 상태로 class 명 입력하는 부분에 파란 네모에 커서가 있다.

여기에서 class 명을 입력하고 Enter를 치면 아래 코드와 같이 자동완성된다.

import 'package:flutter/material.dart';

class TestClass extends StatefulWidget {
  const TestClass({Key? key}) : super(key: key);

  @override
  State<TestClass> createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

프로젝트 최초 main.dart화면도 StaefulWidget으로 코딩되어 있다.

버튼 클릭 시 출력 이벤트 주기

버튼 클릭시 console창에 '버튼'이 출력되도록 구현한 것이다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloPage('Hello World')
    );
  }
}
class HelloPage extends StatefulWidget {
  final String title;

  // 마우스 우클릭 > Generate > Constructor
  HelloPage(this.title);

  @override
  State<HelloPage> createState() => _HelloPageState();
}

class _HelloPageState extends State<HelloPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add), // 버튼 이미지
        onPressed: () => print('버튼') // 버튼 클릭 이벤트,),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(widget.title, style: TextStyle(fontSize: 30)));
  }
}

floatingActionButton: 하단 action event를 수행하는 버튼

onPressed(): 버튼 클릭시 이벤트

버튼 클릭 시 상태 변경하기

버튼 클릭시 body 영역 문구가 '헬로월드'로 변경된 것을 확인할 수 있다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloPage('Hello World')
    );
  }
}
class HelloPage extends StatefulWidget {
  final String title;

  // 마우스 우클릭 > Generate > Constructor
  HelloPage(this.title);

  @override
  State<HelloPage> createState() => _HelloPageState();
}

class _HelloPageState extends State<HelloPage> {
  String _message = 'Hello World!';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _changeMessage),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(_message, style: TextStyle(fontSize: 30)));
  }


  void _changeMessage() {
    setState(() {
      _message = '헬로월드';
    });
  }
}

기본 샘플 앱 해설

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloPage('Hello World')
    );
  }
}
class HelloPage extends StatefulWidget {
  final String title;

  // 마우스 우클릭 > Generate > Constructor
  HelloPage(this.title);

  @override
  State<HelloPage> createState() => _HelloPageState();
}

class _HelloPageState extends State<HelloPage> {
  String _message = 'Hello World!';
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _changeMessage),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_message, style: TextStyle(fontSize: 30)),
              Text('$_counter', style: TextStyle(fontSize: 30)),
            ],
          )
      ));
  }


  void _changeMessage() {
    setState(() {
      _message = '헬로월드';
      _counter++;
    });
  }
}

순서대로 보면

void main() => runApp(const MyApp());

runApp으로 MyApp을 실행한다.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloPage('Hello World')
    );
  }
}

MyApp에서 build를 하는데 home에서 HelloPage를 호출한다.

class HelloPage extends StatefulWidget {
  final String title;

  // 마우스 우클릭 > Generate > Constructor
  HelloPage(this.title);

  @override
  State<HelloPage> createState() => _HelloPageState();
}

class _HelloPageState extends State<HelloPage> {
  String _message = 'Hello World!';
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _changeMessage),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_message, style: TextStyle(fontSize: 30)),
              Text('$_counter', style: TextStyle(fontSize: 30)),
            ],
          )
      ));
  }


  void _changeMessage() {
    setState(() {
      _message = '헬로월드';
      _counter++;
    });
  }
}

HelloPage에는 Scaffold로 화면을 구성했는데 appBar, body, floatingActionButton로 구성되어 있다.

appBar는 상단 파란색 Bar를 의미하고, body는 나머지 하얀 부분, floatingActionButton는 하단 오른쪽 버튼을 의미한다.

appBar는 widget.title로 Hompage를 호출 시 Hompage 괄호 안에 있던 문구를 가지고 온다.

appBar: AppBar(
        title: Text(widget.title),
      ),

Body는 변수로 지정해둔 _message와 _counter를 출력한다.

두가지 값을 Column으로 묶어 MainAxisAlignment.center를 사용해 가운데 위치하게 하고(가로 위치 가운데)

그 Column을 Center로 묶어서 가운데 위치하게 만들었다.(세로 위치 가운데)

body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_message, style: TextStyle(fontSize: 30)),
              Text('$_counter', style: TextStyle(fontSize: 30)),
            ],
          )

마지막으로 floatingActionButton로 버튼 이벤트를 만들었다.

child에 버튼 Icon을 지정해주었다.

onPressed에 _changeMessage함수를 호출하도록 만들었다.

floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _changeMessage),

void _changeMessage() {
    setState(() {
      _message = '헬로월드';
      _counter++;
    });
  }

_changeMessage 함수를 호출할 경우 _message는 헬로월드, _count는 1씩 증가하도록 만들었다.

setState()는 StatefulWidget에서 특정 오브젝트의 값을 변경하기 위해 사용하는 메소드이다.

[Android Studio] 안드로이드 스튜디오 에뮬레이터 설치 및 데모 앱 실행하기

momong'-' — Fri, 28 Apr 2023 10:48:07 +0900

에뮬레이터 실행

안드로이드 스튜디오에서 우측 상단에 있는 Device Manager 아이콘을 클릭한다.

상단에 install이 있을 경우는 설치 후 진행한다.

Create device 버튼을 클릭한다.

원하는 하드웨어를 선택한 뒤 Next를 클릭한다.

S 다운로드 로고를 클릭하여 다운로드 한다.

Accept를 체크한 후 Next를 클릭하고 설치한다.

설치가 완료되면 Finish 버튼을 클릭한다.

S옆에 다운로드 아이콘이 사라진 것을 확인할 수 있다.

Next 버튼을 클릭한다.

Finish 버튼을 클릭한다.

다시 안드로이드 스튜디오 화면의 Device Manager를 보면 하드웨어가 추가된 것을 확인할 수 있다.

재생버튼을 클릭하여 Running Devices에 화면이 뜬 것을 확인한다.

Flutter Project를 생성하면 main.dart에 등록되어 있는 화면을 볼 수 있다.

+ 모양 버튼을 클릭하면 화면에 있는 숫자가 증가한다.

Project에서 lib > main.dart 파일을 열고 코드를 수정해본다.

MyHomePage(title: 'Flutter 모몽 홈페이지')

라고 코드를 변경 후 Ctrl + S로 저장하면 오른쪽 화면에 바로 적용되는 것을 확인할 수 있다.

오른쪽 상단에 번개모양 아이콘(Flutter hot Reload)이 있다. 체크되어 있으면 바로 적용된다.

이제 프로젝트 개발을 실행하면 된다.

[Flutter] 안드로이드 스튜디오에 Flutter 개발환경 구축하기

momong'-' — Thu, 27 Apr 2023 15:11:04 +0900

Flutter Plugin 설치

Android Studio Plugins에서 flutter 설치

Flutter Install 버튼을 클릭한다.

Accept 버튼을 클릭한다.

Install 버튼을 클릭하여 설치한다.

Rstart IDE 버튼을 클릭한다.

Restart 버튼을 클릭하여 안드로이드 스튜디오를 재시작한다.

프로젝트 생성

New Flutter Project를 클릭한다.

좌측에 Flutter를 클릭하고 Flutter SDK path를 설정한다.

Flutter SDK path는 기존에 Flutter를 설치했던 path를 지정한다.

지정한 후 OK버튼을 클릭한다.

Next 버튼을 클릭한다.

Project name 및 설정들을 맞추고 Create 버튼을 클릭하여 프로젝트를 생성한다.

프로젝트가 생성된 것을 확인한다.

좌측 상단에 보면 Project로 안되어 있을 경우 Project로 설정해준다.

하단에 Terminal를 클릭한다.

flutter doctor

위 명령어를 입력하면 사진과 같이 뜬다. X표시되어 있는 걸 하나씩 해결하면 된다.

문제 해결 1) SDK Component Installer

프로그램 우측 상단에 SDK Manager아이콘을 클릭한다.

Appearance & Behavior > System Settings > Android SDK를 선택한다.

SDK Tools를 선택한다.

Android SDK Command-line Tools 체크하여 Apply한다.

설치가 완료되면 Finish를 클릭한다.

Android SDK Command-line Tools가 installed로 되어 있는 것을 확인한 뒤 OK 버튼을 클릭한다.

문제 해결 2) Flutter lincenses 설치

Terminal에서 flutter doctor 명령어 실행 후 Message를 읽어보면 Flutter doctor --android-licenses명령을 실행하라고 뜬다.

y 입력 후 엔터

모두 accept 한다. (y 입력 후 엔터)

Terminal에서 flutter doctor 명령어를 실행한다.

위 사진처럼

[v] Flutter

[v] Android toolchain

[v] Android Studio

3개가 [v]되어 있는 것을 확인하면 설치가 완료된 것이다.

문제 해결 2-1) Flutter lincenses 설치 시 JAVA_HOME is set to an invalid directory 오류 발생

ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\ojdkbuild\java-1.8.0-openjdk-1.8.0.252-2\jdk-11

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.
Android sdkmanager tool was found, but failed to run (C:\Users\imj10\AppData\Local\Android\sdk\cmdline-tools\latest\bin\sdkmanager.bat): "exited code 1".
Try re-installing or updating your Android SDK,
visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.
PS C:\Users\imj10\StudioProjects\untitled> flutter doctor --android-licenses

ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\ojdkbuild\java-1.8.0-openjdk-1.8.0.252-2\jdk-11

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.
Android sdkmanager tool was found, but failed to run (C:\Users\imj10\AppData\Local\Android\sdk\cmdline-tools\latest\bin\sdkmanager.bat): "exited code 1".
Try re-installing or updating your Android SDK,
visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.

위와 같은 오류가 발생했다.

현재 jdk 설정이 1.8로 되어 있어 나는 오류였다.

flutter 페이지에 들어가면 Java11 버전이 설치되어 있어야한다고 한다.

JAVA_HOME의 환경변수가 1.8로 되어있어 생기는 오류였다.

[Flutter] 플러터 설치 및 환경설정(Windows)

momong'-' — Wed, 26 Apr 2023 17:46:02 +0900

Flutter 설치방법

플러 설치 링크 https://flutter.dev/

Flutter - Build apps for any screen

Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

flutter.dev

설치 링크로 들어가서 상단에 있는 Get started 클릭한다.

맞는 OS를 선택하여 클릭한다.(Windows)

fluuter zip 파일 다운로드한다.

원하는 위치에 압축푼다. (flutter라는 폴더로 압축 풀림)

Flutter 환경설정

내 PC 우클릭 > 속성 > 고급 시스템 설정 들어간다.

고급 탭에서 환경변수를 클릭한다.

flutter\bin 위치를 path에 등록한다.

시스템 변수 안에 있는 Path를 더블클릭 한 뒤 flutter\bin(D:\\flutter\\bin)위치를 입력하고 확인을 클릭하여 저장한다.

확인 버튼을 클릭하여 저장한다.

cmd 들어가서 flutter검색 후 잘 저장되었는지 확인한다.