본문 바로가기
Flutter

왕왕 초보를 위한 Flutter 실습 기초 코드_2(Text,Icon)

by 꾸준함이무기다 2023. 2. 16.

Text 위젯의 여러가지 스타일 변화.

주어진 예제에서 색이나 숫자의 크기등을 조정해 가면서 하신다면 더 빨리 이해 하실수 있습니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text(
        'Hello 월드',                        //내가 쓰고 싶은 텍스트를 작성해 준다
        style: TextStyle(                    // 글자의 스타일을 바꾸고 싶을때 사용
            color: Colors.black,             //글자의 색을 바꿔준다
            fontSize: 100,                   //글자의 크기를 바꿔준다
            letterSpacing: 10,               // 자간 설정
            fontWeight: FontWeight.w900,     //글자의 굵기 변경
            backgroundColor: Colors.yellow), //글자 바탕색 변경
      ),
    );
  }
}

 

 

Icon 위젯의 크기와 색상 변화

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Icon(
        Icons.add_a_photo_outlined,  //내가 원하는 아이콘 선택
        size: 100,                   //아이콘의 크기 변경
        color: Colors.blue,          //아이콘의 색상 변경
      ),
    );
  }
}

댓글