앱 개발 공부방

Flutter-scafflod, Appbar 본문

FLUTTER

Flutter-scafflod, Appbar

춘행이 2020. 10. 18. 20:28
728x90

처음으로 flutter 프로젝트를 생성하시면 데모앱이 나올겁니다

다 지워주고 아래 코드처럼 칩니다

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());//앱 실행

class MyApp extends StatelessWidget {//상태 변경이 없는 위젯
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {//UI를 만드는 부분
    return MaterialApp(//구글 기본 디자인인 Material 디자인을 써서 앱을 만든다
      title: 'Flutter Demo',
      theme: ThemeData(//앱 이름
        primarySwatch: Colors.blue,//기본적응로 사용할 색상 견본
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('appbar의 이름'),
        ),
        body: Text('플러터',style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

실행 결과

import 'package:flutter/material.dart';

Material 패키지를 불러오는 것

 

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

main 함수에서 MyApp 함수를 실행한다.

 

StatelessWidget

상태를 가지지 않는 위젯이다, 위젯이 어떤 변화에 대해 무감각하다는 것을 의미한다.

StatelessWidget은 상태 변화를 감지하지 않기 때문에 화면을 구성할 때 최초 한번만 build()함수를 호출한 후 다시 호출하지 않는다

 

Scaffold

Scaffold 위젯은 일반적으로 화면에 아이템들을 배치하는데 사용하는 가장 기본 골격이 되는 위젯입니다.

scaffold 안에 appbar, bottombar body등 다양한걸 배치 하는데 사용합니다.

여기선 appbar만 넣어줬습니다.

 

style

Text 필드 안에 style->TextStyle에서 폰트사이즈, 폰트 색깔 등을 지정할수 있다.

 

 

 

 

 

728x90

'FLUTTER' 카테고리의 다른 글

Flutter-AnimatedContainer  (0) 2020.10.23
Flutter-BottomNavigationBar  (0) 2020.10.23
Flutter-Column , text에 int형 넣기  (0) 2020.10.21
Flutter-StatefluWidget  (0) 2020.10.21
FLUTTER 시작 및 설치  (0) 2020.10.18
Comments