flutter 앱페이지 기본 코드 이해하기

 

 

flutter의 모든 것은 위젯으로 구성 되어 있다고 해도 무관하다.

Stateless Widjets : 변화나 움직임이 없음

Stateful Widjets 

항상 움직이는 정적인 위젯

사용자의 interactive한 활용을 받음

 

모든 위젯은 트리구조로 구성 되어있으며 모든 위젯은 parent, child 위젯으로 구성 된다

 

 

Step 1

import 'package:flutter/material.dart';

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

 

flutter를 사용하기 위해서는 항상 import 해줘야 하며,

main 함수를 선언 한 뒤에는 runApp(funtion)을 호출해야하며,

runApp은 위젯을 argument를 가져야 한다.

 

Step 2

- stl 을 입력해주면 StatelessWidget을 자동생성할 수 있다. 아래와 같은 코드로 생성되며 앞서 지어진 위젯 이름인 Myapp만 입력해 준다.

- return 위젯을 MaterialApp로 변경해준다.

 

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

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

 

Step 3

- 앱의 타이틀과 배경 색상을 정해준다.

- 홈화면의 위젯을 설정해 준다.

import 'package:flutter/material.dart';

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

class Myapp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First app',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),     
    home: MyHomePage(),    
    );
  }
}

 

 

Step 4

flutter는 지속적으로 widget을 생성해주고 거기에 맞는 argumert를 작성해주는 형식의 코딩인 거 같다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My app', // 앱을 총칭하는 이름
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),     
    home: MyHomePage(),    
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App'),
      ), // 빈도와지 같은 역활
      body: Center(
        child: Column(
          children: [
            Text('Hello'),
            Text('Hello'),
            Text('Hello')
          ],
        ),
      ),
    );
  }
}

 

 

 

위의 내용은 아래의 유튜브 강의 내용을 바탕으로 정리 한 내용입니다.

https://www.youtube.com/watch?v=AXFV1JOr6_Q&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=8