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

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에서 특정 오브젝트의 값을 변경하기 위해 사용하는 메소드이다.