flutter

본 토픽은 현재 준비중입니다. 공동공부에 참여하시면 완성 되었을 때 알려드립니다.

첫번째 앱만들기 1단계

이 튜토리얼에서 배울 내용

- 안드로이드와 iOS 앱을 생성

- 플로터앱의 기본 구조

- 패퀴지를 찾는 방법과 사용하는 법

- 개발사이클을 이해하기

- 지연 로딩 리스트 만들기

https://flutter.dev/docs/get-started/codelab#what-youll-learn-in-part-1

필요사항

- Flutter SDK 와 editor

1단계 . Flutter 앱 만들기

안드로이드 스튜디오를 이용하여 flutter 어플리케이션 실행

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

1. 프로젝트의 폴더에서 lib/main.dart 파일을 위에 코드를 교체하고 프로젝트를 run 하면 헬로우월드가 나타난다.

  • Terminal: Run flutter format <filename>.

위에 명령어를 입력하면 코드가 포맷팅 된다. 복사 붙혀넣기 과정에서 코드의 간격이 일그러지 경우 위에 명령어를 입력하면 도움이 된다.

관찰

- flutter는 모든것이 위젯이다. 이 예제에서는 StatelessWidget를 사용하여 개발된 것이다.

- 윗젯은 여백, 간격, 정렬등이 포함된 하나의 컴포넌트라고 보면 된다.

- statelessWidget은 자신이 앱의 형태를 만든다.

- Scaffold 윗젯은 매트리얼 라이브리러, 제목, 본문 속성의 트리구조를 가진다. 이 위젯의 하부구조는 복잡하게 될 수 있다.

- 윗젯의 주된 역할은 build() 메소드를 제공하는 것이다. 다른 위젯 또는 다른 하위 윗젯에게 어떻게 디스플레이할것인가를 표시하는 방법을 설명한다.

- 코드에서 보면 하위 body라는 속성에 Text 자식 윗젯을 포함하는 Center라는 윗제를 구성한다. Center 위젯은 하위에 위젯들을 화면 가운데로 정렬한다.

- 트리구조를 갖는다.

 

 

댓글

댓글 본문
버전 관리
happydeveloper
현재 버전
선택 버전
graphittie 자세히 보기