쏘니의 개발블로그

mage 위젯은 Flutter에서 이미지를 표시하는 가장 기본적인 위젯입니다. 다양한 이미지 소스에서 이미지를 가져올 수 있도록 지원합니다. 여기서는 NetworkImage를 사용하여 네트워크에서 이미지를 가져와 표시하는 예제에 대해 설명합니다.

주요 속성

• image: 이미지 소스를 지정합니다. NetworkImage, AssetImage, FileImage, MemoryImage 등을 사용할 수 있습니다.

• fit: 이미지의 박스 내에서의 배치 방법을 지정합니다. BoxFit 속성을 사용하여 조정합니다.

assets images 보여주기

body: Center(
          child: Image.asset('assets/images/my_image.png'),
        ),

네트워크 이미지 가져오기 예시

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: Image(
    image: NetworkImage(
      'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg'
    ),
    // fit: BoxFit.fill,
  ),
)

body: Center(
          child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
        ),

속성 설명

1. Image 위젯:

• image: NetworkImage를 사용하여 네트워크 URL에서 이미지를 가져옵니다.

• fit: BoxFit.fill을 사용하여 이미지가 위젯의 박스를 채우도록 합니다.

2. NetworkImage:

• url: 이미지의 URL을 지정합니다. 네트워크에서 이미지를 가져옵니다.

BoxFit 옵션

• BoxFit.fill: 이미지의 원본 비율을 무시하고, 컨테이너를 완전히 채우도록 크기를 조정합니다.

• BoxFit.contain: 이미지의 원본 비율을 유지하면서, 컨테이너 안에 완전히 들어가도록 크기를 조정합니다.

• BoxFit.cover: 이미지의 원본 비율을 유지하면서, 컨테이너를 완전히 덮도록 크기를 조정합니다.

• BoxFit.fitWidth: 이미지의 너비가 컨테이너의 너비에 맞춰지도록 크기를 조정합니다. 높이는 원본 비율을 유지합니다.

• BoxFit.fitHeight: 이미지의 높이가 컨테이너의 높이에 맞춰지도록 크기를 조정합니다. 너비는 원본 비율을 유지합니다.

• BoxFit.none: 이미지의 크기를 조정하지 않고, 원본 크기를 유지합니다.

• BoxFit.scaleDown: 이미지의 크기를 원본 비율을 유지하면서 컨테이너에 맞도록 축소합니다.

예제 변경: BoxFit 옵션 비교

body: Column(
          children: <Widget>[
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.fill,
              ),
            ),
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.contain,
              ),
            ),
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ]

요약

• Image 위젯: Flutter에서 이미지를 표시하는 기본 위젯입니다.

• NetworkImage: 네트워크 URL에서 이미지를 가져오는 이미지 프로바이더입니다.

• BoxFit: 이미지를 컨테이너 내에서 어떻게 맞출지 결정하는 속성입니다. 다양한 옵션을 통해 이미지의 배치 방법을 조정할 수 있습니다.

문서 참고

• Image 클래스 문서

• NetworkImage 클래스 문서

• BoxFit 클래스 문서

AlertDialog 위젯은 Flutter에서 사용자에게 중요한 정보를 알리거나 선택을 요구할 때 사용하는 팝업 창입니다. 일반적으로 제목, 본문 내용, 액션 버튼(예: 확인, 취소)을 포함합니다.

주요 속성

• title: 대화 상자의 제목을 설정합니다.

• content: 대화 상자의 본문 내용을 설정합니다.

• actions: 사용자가 선택할 수 있는 버튼 목록을 설정합니다.

• shape: 대화 상자의 모양을 설정합니다.

• backgroundColor: 대화 상자의 배경색을 설정합니다.

• elevation: 대화 상자의 그림자 깊이를 설정합니다.

예시 

body: Container(
  child: Center(
    child: TextButton(
      onPressed: () {
        showDialog(
            context: context,
            builder: (BuildContext con) {
              return AlertDialog(
                title: const Text("Dialog Title"),
                content: Container(
                  child: const Text("Dialog Content"),
                ),
                actions: [
                  TextButton(
                      onPressed: () => Navigator.of(context).pop(), 
                      child: const Text("Close")
                  )
                ],
              );
            }
        );
      },
      child: const Text("팝업 버튼"),
    ),

  ),
),

다른예시

사용자 정의 AlertDialog

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom AlertDialog Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _showCustomDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Custom Alert"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("This is a custom alert dialog."),
              SizedBox(height: 20),
              FlutterLogo(size: 50),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => _showCustomDialog(context),
      child: Text('Show Custom AlertDialog'),
    );
  }
}

주요 포인트

• title: 대화 상자의 제목을 설정합니다. 일반적으로 Text 위젯을 사용합니다.

• content: 대화 상자의 본문 내용을 설정합니다. Text 위젯 또는 다른 복합 위젯을 사용할 수 있습니다.

• actions: 대화 상자의 하단에 위치하는 버튼 목록을 설정합니다. TextButton 또는 ElevatedButton 등을 사용합니다.

• showDialog: 대화 상자를 화면에 표시하는 함수입니다.

• context: 대화 상자를 표시할 컨텍스트입니다.

• builder: 대화 상자를 빌드하는 함수입니다. AlertDialog 위젯을 반환합니다.

• Navigator.of(context).pop(): 대화 상자를 닫는 함수입니다.

AlertDialog 문서

• AlertDialog 클래스 문서: AlertDialog 클래스 문서

• showDialog 함수 문서: showDialog 함수 문서

ListView는 Flutter에서 스크롤 가능한 리스트를 만들기 위해 사용하는 위젯입니다. 많은 데이터 항목을 스크롤 가능한 리스트로 표시할 때 매우 유용합니다. ListView는 여러 종류가 있으며, 각각의 용도에 맞게 사용될 수 있습니다.

일반 리스트뷰 샘플

body: ListView(
  children: [
    Container(
      padding: const EdgeInsets.all(10),
      child: const Text(
          "title 1",
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold
          ),
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      color: Colors.red,
    ),
    Container(
      padding: const EdgeInsets.all(10),
      child: const Text(
        "title 1",
        style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold
        ),
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      color: Colors.red,
    ),
    Container(
      padding: const EdgeInsets.all(10),
      child: const Text(
        "title 1",
        style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold
        ),
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      color: Colors.red,
    )
  ],
)

위와 같이 listview 의 children 에 여러개의 컴포넌트를 넣는다면 코드가 복잡해지기 때문에 하나의 컴포넌트로 만들필요가 있습니다. 

리스트 view 의 아이템을 컴포넌트 화 해보기

body: ListView(
  children: [
    postContainer(title: "title 1"),
    postContainer(title: "title 2", colorData: Colors.blue),
    postContainer(title: "title 3", colorData: Colors.green)
  ],
)

Widget postContainer({String title = '', Color colorData = Colors.red}) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        padding: const EdgeInsets.all(10),
        child: Text(
          title,
          style: const TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold
          ),
        ),
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        height: 100,
        color: colorData,
      )
    ],
  );
}

title 과 color 를 변수로 사용할 수 있습니다. 

만약 가로 스크롤을 원한다면 scrollDirection 을 변경해주면 됩니다.

body: ListView(
  scrollDirection: Axis.horizontal,

ListView.Builder 

final postList = [
  {
    "title" : "Sample title 1" ,
    "color" : Colors.blue
  },
  {
    "title" : "Sample title 2" ,
    "color" : Colors.greenAccent
  },
  {
    "title" : "Sample title 3" ,
    "color" : Colors.lime
  },
  {
    "title" : "Sample title 4" ,
    "color" : Colors.blue
  },
  {
    "title" : "Sample title 5" ,
    "color" : Colors.green
  },
  {
    "title" : "Sample title 6" ,
    "color" : Colors.yellow
  },
  {
    "title" : "Sample title 7" ,
    "color" : Colors.red
  },
];

위와 같은 데이터가 선언되어 있을 때 ListView.builder 를 사용하여 쉽게 구현할 수 있습니다. 

itemCount 및 itemBuilder 속성을 통하여 list data 를 노출할 수 있습니다.

body: ListView.builder(
    itemCount: postList.length,
    itemBuilder: (BuildContext con, int index)  {
      return postContainer(
          title: postList[index]["title"] as String,
          colorData: postList[index]["color"] as Color
      );
    }
)

다른 예시

기본 ListView 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Basic ListView'),
        ),
        body: ListView(
          padding: EdgeInsets.all(8.0),
          children: <Widget>[
            ListTile(
              title: Text('Item 1'),
            ),
            ListTile(
              title: Text('Item 2'),
            ),
            ListTile(
              title: Text('Item 3'),
            ),
          ],
        ),
      ),
    );
  }
}

ListView.builder

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder Example'),
        ),
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

주요 속성

• children: 리스트에 표시할 위젯 목록을 지정합니다 (ListView).

• itemCount: 리스트 항목의 개수를 지정합니다 (ListView.builder, ListView.separated).

• itemBuilder: 각 항목을 빌드하는 함수입니다 (ListView.builder, ListView.separated).

• separatorBuilder: 항목 사이에 구분자를 빌드하는 함수입니다 (ListView.separated).

• scrollDirection: 리스트의 스크롤 방향을 지정합니다. 기본값은 Axis.vertical입니다.

• padding: 리스트의 패딩을 지정합니다.

• reverse: 스크롤 방향을 반대로 설정할지 여부를 지정합니다. 기본값은 false입니다.

ListView 문서

• ListView 클래스 문서

• ListView.builder 클래스 문서

• ListView.separated 클래스 문서

• ListView.custom 클래스 문서

Flutter에서 클릭 이벤트를 처리하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 ElevatedButton과 같은 버튼 위젯을 사용하는 것이며, 보다 정밀한 제어가 필요할 때는 GestureDetector 위젯을 사용할 수 있습니다. 각각의 방법에 대해 설명하겠습니다.

1. ElevatedButton 클릭 이벤트

ElevatedButton은 Flutter에서 기본적으로 제공되는 버튼 위젯 중 하나입니다. 사용자가 버튼을 클릭했을 때 특정 동작을 수행하기 위해 onPressed 콜백을 정의합니다.

body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button clicked!');
            },
            child: Text('Click Me'),
          ),
        ),

body: Center(
  child: TextButton(
    onPressed: () => print("버튼이 클릭되었습니다."),
    child: const Text("버튼"),
  ),
),

button 을 클릭해야지만 프린트 부분이 출력됩니다. 

2. GestureDetector 클릭 이벤트

GestureDetector 위젯은 더 정밀하게 제어할 수 있는 다양한 제스처 이벤트를 처리할 수 있습니다. 클릭(탭), 두 번 클릭, 길게 누르기 등 다양한 제스처를 처리할 수 있습니다.

body: Center(
  child: GestureDetector(
    onTap: () => print("gesture detect on tap"),
    child: Container(
      width: 200,
      height: 200,
      color: Colors.amber,
    ),
  ),
),

body: Center(
          child: GestureDetector(
            onTap: () {
              print('Container clicked!');
            },
            onDoubleTap: () {
              print('Container double-clicked!');
            },
            onLongPress: () {
              print('Container long-pressed!');
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Tap me',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        )

container 부분을 클릭해야지만 Print 가 출력이 됩니다. 

레퍼런스

• ElevatedButton 문서

• GestureDetector 문서

Stack 위젯은 Flutter에서 여러 자식 위젯을 서로 겹쳐서 배치할 수 있도록 하는 레이아웃 위젯입니다. Stack 위젯은 Positioned 위젯과 함께 사용하여 자식 위젯의 위치를 지정할 수 있으며, 이를 통해 복잡한 레이아웃을 쉽게 구성할 수 있습니다.

주요 속성

• alignment: Stack 내에서 자식 위젯을 정렬하는 방법을 지정합니다. 기본값은 AlignmentDirectional.topStart입니다.

• fit: 자식 위젯이 Stack의 크기에 어떻게 맞춰질지 지정합니다. StackFit.loose(기본값), StackFit.expand, StackFit.passthrough 등이 있습니다.

• overflow: 자식 위젯이 Stack의 경계를 넘을 때 어떻게 처리할지 지정합니다. Overflow.clip(기본값), Overflow.visible 등이 있습니다.

주요 사용 사례

1. 단순 겹침

2. 정확한 위치 지정

body: Container(
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 200,
        color: Colors.red,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 50, left: 50),
        color: Colors.blue,
      )
    ],
  ),
)

두번때 container 에 margin 을 위 50 좌 50 을 주는 코드입니다. 

stack 을 활용한 도형 겹치기 실습입니다. 

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  color: Colors.yellow,
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 200,
        color: Colors.red,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 50, left: 50),
        color: Colors.blue,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 100, left: 100),
        color: Colors.green,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 150, left: 150),
        color: Colors.orange,
      ),
    ],
  ),
)

positioned 위젯으로도 같은 내용을 표현 가능합니다.

Container(
  width: 150,
  height: 200,
  color: Colors.red,
),
Container(
  width: 150,
  height: 200,
  margin: const EdgeInsets.only(top: 50, left: 50),
  color: Colors.blue,
),
Positioned(
  left: 100,
  top: 100,
  // right: 10,
  // bottom: 10,
  child: Container(
    width: 150,
    height: 200,
    color: Colors.green,
  ),
),
Container(
  width: 150,
  height: 200,
  margin: const EdgeInsets.only(top: 150, left: 150),
  color: Colors.orange,
),

• Stack 위젯 문서: https://api.flutter.dev/flutter/widgets/Stack-class.html

• Positioned 위젯 문서: https://api.flutter.dev/flutter/widgets/Positioned-class.html

Flutter에서는 다양한 종류의 위젯을 제공하여 사용자 인터페이스를 구축할 수 있습니다. 주요 위젯들은 다음과 같은 범주로 나눌 수 있습니다.

1. 기본 위젯

Text

• 설명: 텍스트를 화면에 표시하는 위젯.
• 사용 예시:
   

Text('Hello, Flutter!')

• 레퍼런스: https://api.flutter.dev/flutter/widgets/Text-class.html

Container

• 설명: 레이아웃, 스타일, 배경색, 패딩 등을 조정할 수 있는 다목적 위젯.
• 사용 예시:
   

Container(
  padding: EdgeInsets.all(16.0),
  color: Colors.blue,
  child: Text('Hello, Container!'),
)

레퍼런스: https://api.flutter.dev/flutter/widgets/Container-class.html

Column

• 설명: 자식 위젯들을 수직으로 정렬하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Column-class.html

Column( children: <Widget>[ Text('First Item'), Text('Second Item'), ], )

Row

• 설명: 자식 위젯들을 수평으로 정렬하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Row-class.html

Row( children: <Widget>[ Text('First Item'), Text('Second Item'), ], )

Image

• 설명: 이미지를 표시하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Image-class.html

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Stack

• 설명: 자식 위젯을 겹쳐서 표시할 수 있습니다.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Stack-class.html

2. 입력 위젯

TextField

• 설명: 사용자가 텍스트를 입력할 수 있는 필드.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/material/TextField-class.html

TextField( decoration: InputDecoration( labelText: 'Enter your name', ), )

RaisedButton (Deprecated), ElevatedButton

• 설명: 클릭할 수 있는 버튼 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/material/ElevatedButton-class.html

ElevatedButton( onPressed: () {}, child: Text('Click Me'), )

Checkbox, Radio, Switch

• 설명: 체크박스, 라디오 버튼, 스위치
• 레퍼런스:
• Checkbox: https://api.flutter.dev/flutter/material/Checkbox-class.html
• Radio: https://api.flutter.dev/flutter/material/Radio-class.html
• Switch: https://api.flutter.dev/flutter/material/Switch-class.html

Checkbox( value: true, onChanged: (bool? value) {}, )

3. 레이아웃 위젯

Padding

• 설명: 자식 위젯에 패딩을 추가하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Padding-class.html

Padding( padding: EdgeInsets.all(16.0), child: Text('Padded Text'), )

Center

• 설명: 자식 위젯을 중앙에 배치하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Center-class.html

Center( child: Text('Centered Text'), )

Expanded

• 설명: 자식 위젯이 남은 공간을 차지하도록 하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Expanded-class.html

Row( children: <Widget>[ Expanded( child: Text('Expanded Text'), ), ], )

ListView

• 설명: 스크롤 가능한 리스트를 표시하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/ListView-class.html

ListView( children: <Widget>[ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ], )

4. 네비게이션 위젯

Navigator

• 설명: 화면 전환을 관리하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Navigator-class.html

Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), )

Drawer

• 설명: 앱의 사이드 메뉴를 제공하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/material/Drawer-class.html

Drawer( child: ListView( padding: EdgeInsets.zero, children: <Widget>[ DrawerHeader( child: Text('Drawer Header'), decoration: BoxDecoration( color: Colors.blue, ), ), ListTile( title: Text('Item 1'), onTap: () {}, ), ], ), )

5. 애니메이션 위젯

AnimatedContainer

• 설명: 애니메이션 효과를 주는 컨테이너.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

AnimatedContainer( duration: Duration(seconds: 1), color: _color, child: FlutterLogo(size: 75), )

FadeTransition

• 설명: 투명도 애니메이션을 적용하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/FadeTransition-class.html

FadeTransition( opacity: _animation, child: FlutterLogo(size: 100.0), )

머티리얼 디자인 위젯

a. Scaffold

• 설명: 기본적인 머티리얼 디자인 레이아웃 구조를 제공합니다.
• 문서: https://api.flutter.dev/flutter/material/Scaffold-class.html

b. AppBar

• 설명: 앱 상단에 표시되는 앱 바를 구현합니다.
• 문서: https://api.flutter.dev/flutter/material/AppBar-class.html

c. FloatingActionButton

• 설명: 화면 위에 떠 있는 동그란 버튼을 생성합니다.
• 문서: https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

레퍼런스

• 위젯 카탈로그: https://flutter.dev/widgets
• Flutter API 문서: https://api.flutter.dev/

Flutter 개발을 더 효율적으로 하기 위해 Android Studio나 Visual Studio Code에서 사용할 수 있는 유용한 약어(코드 스니펫)들이 많이 있습니다. 이러한 스니펫들은 코드를 빠르게 작성하고 오류를 줄이는 데 도움이 됩니다. 아래는 Flutter 개발 시 유용한 코드 스니펫과 약어 목록입니다.

1. stful: StatefulWidget 생성

stful

이 약어를 입력하면 StatefulWidget 클래스의 기본 구조가 자동으로 생성됩니다.

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Your code here
    );
  }
}

2. stless: StatelessWidget 생성

stless

이 약어를 입력하면 StatelessWidget 클래스의 기본 구조가 자동으로 생성됩니다.

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Your code here
    );
  }
}

3. initState: initState 메서드 생성

initState

State 클래스 내에서 initState 메서드를 빠르게 생성할 수 있습니다.

@override
void initState() {
  super.initState();
  // Your code here
}

4. build: build 메서드 생성

build

위젯의 build 메서드를 빠르게 생성할 수 있습니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Title'),
    ),
    body: Center(
      child: Text('Hello, World!'),
    ),
  );
}

5. setState: setState 메서드 생성

setState

setState(() {
  // Your state change code here
});

IntelliJ IDEA 또는 Android Studio에서는 사용자 정의 코드 템플릿을 설정할 수 있습니다.

1. Preferences > Editor > Live Templates로 이동합니다.

2. Flutter 그룹을 선택하거나 새 그룹을 만듭니다.

3. 새 템플릿을 추가하고 약어와 템플릿 텍스트를 설정합니다.

예를 들어, stful 템플릿을 추가할 때:

• Abbreviation: stful

• Template text:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Your code here
    );
  }
}

안드로이드 스튜디오 다운 링크

https://developer.android.com/studio?gad_source=1&gclid=CjwKCAjwnK60BhA9EiwAmpHZw8fNEnrne2ansIdcGTLxs6sy03elCeOiHOHncwj4lX5mJYvKtfJW1xoCiBEQAvD_BwE&gclsrc=aw.ds

본인 컴퓨터의 버젼에 맞는 안드로이드 스튜디오를 다운 받습니다.

standard 로 진행합니다.

각 항목별로 accept 를 진행합니다.

finish 로 다음 다운을 진행합니다.

프로젝트 시작화면이 나올텐데 여기서 좌측 plugins 를 선택 후 flutter 을 install 합니다.

설치 완료 후 ide 를 다시시작해 업데이트를 적용합니다.

처음 실행한다면 android sdk 가 깔려있지 않기 때문에 more acions 로 sdk 를 깔아줍니다.

sdk manager 를 클릭해 줍니다. 

android sdk command-line Tools(latest) 를 체크하고 다운 받아 줍니다.

android 를 설치한다고 flutter sdk가 설치되는 것은 아닙니다. 추가로 설치해주어야 합니다.

Flutter SDK 설치 및 설정

1. Flutter SDK 다운로드

Flutter 공식 웹사이트에서 SDK를 다운로드합니다.

https://docs.flutter.dev/get-started/install

내 os 에 맞는 아이콘을 선택해 줍니다.

1. Desktop: 데스크톱 앱을 개발하려는 경우 선택하세요.

2. iOS: iOS 앱을 개발하려는 경우 선택하세요. 만약 iOS와 Android 둘 다 개발할 계획이라면 iOS를 선택하는 것이 좋습니다.

3. Android: Android 앱을 개발하려는 경우 선택하세요.

4. Web: 웹 애플리케이션을 개발하려는 경우 선택하세요.

윈도우 설치 

https://docs.flutter.dev/release/archive?tab=windows

환경변수 등록 

윈도우의 경우

 

 

환경변수 페이지에서 flutter 환경 변수를 추가합니다.

 Path 누르고 편집을 누릅니다.

 

 

 

 

▲ 새로만들기를 눌러서 님이 아까 압축푼 Flutter폴더 안의 bin 폴더의 풀 경로를 적어줍니다.

 

 

 

 

 

맥설치 

os 에 맞는 zip 파일 다운받은 후 설치 원하는 경로에 들어가서 아래 unzip 으로 압축을 풀어주면 flutter 라는 폴더 생성이 됩니다.

unzip ~/Downloads/flutter_macos_arm64_3.22.2-stable.zip 

flutter 를 다운받아주고 이를 컴퓨터 환경변수에 넣어줘야 한다.

https://docs.flutter.dev/get-started/install/macos/mobile-ios?tab=download#add-flutter-to-your-path

파일 생성

touch ~/.zshenv

파일 수정

open ~/.zshenv

아래 development 에는 본인이 설치한 경로를 넣어줍니다.

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

맥, 윈도우 공통 설치 과정

다시 안드로이드 스튜디오가 flutter 를 인식할수 있도록 작업을 해줍니다. 

New Flutter Project 라는 걸 클릭해줍니다. 

sdk path 를 우리가 다운받아준 경로로 설정해줍니다. 

NEXT 로 진행해줍니다. 

app name 및 설정을 입력해 주고 create 를 통해 프로젝트 생성해 줍니다.