Flutter 기초 개념

강민재·2024년 4월 12일

IT flutter iOS 개발 개발자 안드로이드 코딩

Flutter

목록 보기

3/10

지난 시간에 dart에 대해 알아 봤다면, 오늘은 가상 디바이스를 통해서, flutter 기초에 대해 알아보겠습니다.

가상 디바이스 켜는 방법

안드로이드 스튜디오 우측에 디바이스 매니저에 보면 기본적으로 등록되어 있는 가상디바이스가 있을거에요.
저는 지금 실행 중이라 네모인데, 보통은 삼각형 입니다.
그 밑에 아이콘을 클릭하고 시행시켜 보면

요렇게 화면이 구성될 겁니다.
flutter 앱 개발은 lib 안에 main.dart 에서 이루어진 답니다.

flutter

독립적으로 실행되는 작은 프로그램
플러터에서 위젯은 ui를 구성하는 기본단위요소(text, button 등)
눈에 보이지 않는 요소들도 위젯(padding, margin)
flutter에서 위젯이 아닌게 거의 없다네요.
종류
- Stateless 위젯 : 상태변화가 없다는 뜻으로 정적인 화면 예) 스플래시 페이지(첫화면), 단순 출력페이지
- Stateful 위젯 : 상태가 바뀌는 동적인 화면 예) 버튼 클릭시 수량 증가

메서드 호출하기

위 사진에서 home: 옆에는 제가 작성한 메서드를 호출하는 곳입니다.
MyApp에서 내가 만든 기능 실행한다고 보면 쉬울거 같아요.

메서드 작성하기

tip : stless 작성하고 엔터빵!

사진과 같은 틀이 작성이 된답니다.
리턴값에 적절한 기능을 구성해서 돌려주면 된답니다!!
참고로, return값에는 하나의 값 밖에 돌려 주지 못해서, Scaffold를 활용해서 앱을 구성할 수 있답니다.

Scaffold

사전적 의미 : 공사현장에서 높은 곳에 공사를 위한 큰 틀, 구조물
개발환경에서 개발을 돕기 위한 큰 틀
앱의 구성 : appbar, body, bottomnavigationbar
앱의 구성요소들을 모두 사용할 수 있게 도와주는 녀석이에요

Scaffold 사용해보기

appbar 만드는 법 - AppBar() 위젯을 사용
AppBar(

property(요소)
모든 위젯은 요소를 가지는데
객체지향 프로그래밍 언어 - 필드와 메소드 간의
중간 클래스 getter,setter메소드로 변환해서 호출할 필드 처럼 존재
)

기본적으로 위젯은 한 칸에 하나만 작성이 가능
여러위젯을 묶을 수 잇는 위젯들이 존재 - Row, Column
- Row - 가로로 위젯 쌓기
- Column - 세로로 위젯 쌓기
- alt + enter : 감싸고 싶은 위젯에 마우스 클릭해서 Row, Column 불러다 쓰기
코드

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('짱구는 못말려'),
        backgroundColor: Colors.pinkAccent[100],
      ),
      body: Column(
        children: [
          Text(
            'fnfn',
            style: TextStyle(fontSize: 30, color: Colors.blue),
            textAlign: TextAlign.center,
          ),
          Text("안녕하세요"),
          Text("짱구"),
          Text("철수"),
        ],
      ),
    );
  }
}

결과

이미지 사용하기

이미지 폴더 생성하기
pubspec.yaml 들어가서 경로 설정해주기

이렇게 경로 설정해줘야 합니다. 만드신 폴더 이름으로 해주세용~.

Image.asset('경로') 위젯 이용하기

코드

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

    @override
    Widget build(BuildContext context) {
      return  Scaffold(
        // 상단에 배터리, 와이파이가 보여지는 공간을 safearea
        body: SafeArea(
        // 위젯 마다 하나의 위젯만 올 수 있는 위젯
        // 여러개의 위젯이 올 수 있게 하는 위젯 (숫자가 매우 적음) - Row, Column
            child: Row(
              children: [
                Icon(Icons.add_alarm,
                  color: Colors.green,
                  size: 50,
                ),
                ElevatedButton(onPressed: (){
                  print('안녕');
                }, child: Text('짱구')),
              
                Image.asset('image/ryan1.jpg', width: 50,height: 50,)
              ],
            )
        ),

      );
    }
  }

결과

예제1

코드

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

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
         title: Text("첫번째 예제", style: TextStyle(
           color: Colors.white,
         )
         ),
          backgroundColor: Colors.pink,

        ),
        body: Center(
          child: Column(
            children: [
              Image.asset('image/ryan1.jpg',width:120,height:120 ,alignment: Alignment.center),
            Text('안녕 내이름은 라이언이야!', textAlign: TextAlign.left,)
            ],
          ),
        ),

      );
    }
  }

예제2

코드

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("두번째 예제",style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.green[200],

      ),
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset('image/ryan1.jpg',width: 120,height: 120,),
          Text("안녕 내이름은 라이언이야",)
        ],
      )
    );
  }
}