[Flutter] 기초 지식

 

< Scaffold, AppBar >

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); // 메인이 시작점이며 MyApp()을 호출하는 것이다.

class MyApp extends StatelessWidget { // flutter는 모두 위젯으로서 작동하게 된다.
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) { // build 함수가 Material APP을 리턴
    return MaterialApp( // 안드로이드의 material design을 가져온 것이다.
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('헬로 월드'),
          ),
          body: Text(' 헬로 월드',
          style: TextStyle(fontSize: 30),
          )), // material app design을 적용시키기 위해서는 scaffold로 감싸주어야 한다.
    );
  }
}

 

< StatelessWidget & StatefulWidget >

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); // 메인이 시작점이며 MyApp()을 호출하는 것이다.

class MyApp extends StatelessWidget { // flutter는 모두 위젯으로서 작동하게 된다.
  // StatelessWidget은 상태를 가질 수 없으므로 Statefulwidget을 만든다.

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) { // build 함수가 Material APP을 리턴
    return MaterialApp( // 안드로이드의 material design을 가져온 것이다.
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloPage('hello world'), // 화면을 만들어서 이쪽에서 불러오는 식으로 작동하게 된다.
    );
  }
}

//stateful이라는 새로운 화면이다.
class HelloPage extends StatefulWidget { // 이 구조는 stateful 상태를 가질 수 있다.
  final String titie;

  HelloPage(this.titie): super();

  @override
  _HelloPageState createState() => _HelloPageState();
}

class _HelloPageState extends State<HelloPage> {
  @override
  Widget build(BuildContext context) { // 여기서 내가 원하는 화면을 그려주면 된다.
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.titie),
        ),
        body: Text(widget.titie, style: TextStyle(fontSize: 30)));
  }
}

< 상태 변경 >

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); // 메인이 시작점이며 MyApp()을 호출하는 것이다.

class MyApp extends StatelessWidget { // flutter는 모두 위젯으로서 작동하게 된다.
  // StatelessWidget은 상태를 가질 수 없으므로 Statefulwidget을 만든다.

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) { // build 함수가 Material APP을 리턴
    return MaterialApp( // 안드로이드의 material design을 가져온 것이다.
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloPage('hello world'), // 화면을 만들어서 이쪽에서 불러오는 식으로 작동하게 된다.
    );
  }
}

//stateful이라는 새로운 화면이다.
class HelloPage extends StatefulWidget { // 이 구조는 stateful 상태를 가질 수 있다.
  final String titie;
  HelloPage(this.titie): super();
  @override
  _HelloPageState createState() => _HelloPageState();
}

class _HelloPageState extends State<HelloPage> {
  String _message = "hello world";
  
  @override
  Widget build(BuildContext context) { // 여기서 내가 원하는 화면을 그려주면 된다.
    return Scaffold(
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add), // app에서의 ICON모양을 ADD로 설정해 주는 것이다.
            onPressed: _changeMessage),// 버튼이 눌렸을 때 작동할 함수를 만들어 준다.
        appBar: AppBar(
          title: Text(widget.titie),
        ),
        body: Text(_message, style: TextStyle(fontSize: 30)));
  }

  void _changeMessage() { // 버튼이 눌렸을때 작동할 함수부분
    setState(() { // message변수를 '헬로 월드'로 변경해 준다.
      _message = '헬로 월드';
    });
  }
}