happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

배경색 지정하기

이번에는 배경색을 지정해볼게요.

배경색을 지정하기 전에 우선 알아야 할게 있어요.

그것은 바로 Container() 위젯입니다.

공간을 만드는 위젯입니다.

Container()위젯 사용하기

그럼 home에 Container()를 사용해 봅시다.

다음과 같이 home의 코드를 변경해주세요.

home: Container(

),

Container에 color속성을 사용해서 배경색을 지정할 수 있습니다.

home: Container(
    color: Colors.red
),

그럼 현재까지의 코드는 다음과 같죠.

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,
            ),
            home: Container(
                color: Colors.red,
            ),
        );
    }
}
background color

그럼 이번엔 글씨를 넣어볼까요? Container안에 글씨를 넣어봅시다.

home: Container(
    color: Colors.red,
),

위젯 안에 위젯을 하나 추가할 때는 child를 사용합니다.

그리고 그 child안에 추가할 위젯을 넣습니다.

child() 위젯 사용하기

home: Container(
    color: Colors.red,
    child(
        //추가할 위젯
    ),
),

Text()위젯을 넣는다면

home: Container(
    color: Colors.red,
    child(
        Text('everdevel'),
    ),
),

여기까지 작성한 MyApp클래스의 코드는 다음과 같습니다.

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

빨간색 배경에 빨간 글씨라니 영 좋지 않네요.

우리는 여기에서 배경색 변경하는 방법을 알았으니 다음 시간에 글씨색을 변경하는 방법에 대해 알아봅시다.


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

최경아크리에이티브디렉터의 호텔웨딩플라워디자인 예비신부,플로리스트들에게 주는 공간디자인 컬러별 정리되어있는 웨딩장식

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준