CLASS app

Flutter

MaterialApp - 화면에 글씨 출력하기

MaterialApp - 화면에 글씨 출력하기

앞에서 MaterialApp()까지 만들었습니다.

MaterialApp()에 앱의 이름, 기본 테마 색, 위젯을 지정합니다.

앱 이름 지정 title

MaterialApp()에 앱 이름을 지정하려면 title인수를 사용합니다.

title: '앱이름'

앱의 기본 테마색 지정 theme

기본 테마색은 theme인수를 사용하며 값으로 ThemeData메서드를 사용하여 primarySwatch속성을 지정합니다.

사용방법은 다음과 같습니다.

theme: ThemeData(
    primarySwatch: '색상',
),

색상은 Colors 객체를 사용합니다.

파란색을 사용하려면 다음과 같이

Colors.blue

빨간색을 사용하려면 다음과 같이

Colors.red

즉, 파란색으로 지정한다면 다음과 같습니다.

theme: ThemeData(
    primarySwatch: Colors.blue,
),

MaterialApp()의 내용을 다음과 같이 작성합니다.

return MaterialApp(
    title: 'hello',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
);

현재까지의 최종 코드는 다음과 같습니다.

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return MaterialApp(
            title: 'hello',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
        );
    }
}

여기까지 앱을 실행해도 아무것도 나타나지 않습니다.

material app

이제 화면에 위젯을 넣어봅시다.

MaterialApp()에 home인수을 지정합니다.

앱을 처음 켜면 나오는 화면을 home에서 컨트롤합니다.

home인수를 생성합니다.

화면에 pinkcoding를 출력해봅시다.

Text()위젯을 사용합니다.

Text()위젯의 괄호 안에 출력할 문구를 입력합니다.

return MaterialApp(
    title: 'hello',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Text('pinkcoding'),
);

현재까지의 코드는 다음과 같습니다.

그럼 실행해 봅시다.

material app

드디어 화면에 뭔가를 출력했습니다.

지금은 배경색이 검은색입니다.
다음시간에는 배경색을 지정해봅시다.





댓글 0개

정렬기준

PinkCoding

PinkCoding

X

PinkCoding

Web Scratch Pad

X

loading

            
            
        

컨텐츠로 돌아가기