[Flutter] 28. 구글 내장 아이콘과 Material 3

[Flutter] 28. 구글 내장 아이콘과 Material 3

 

1. 구글 내장 아이콘 사용하기

구글 폰츠 - [Icons]에서 사용할 아이콘들을 검색해 찾을 수 있다.

 

 

 

2. 아이콘의 스타일

• outlined: 윤곽선 스타일
• rounded: 둥근 스타일
• sharp: 직선 스타일

 

 

3. MaterialApp color theme과 Material 3 색상

• useMaterial3을 사용하면 Material 라이브러리의 최신 버전 사용 가능
• useMaterial3과 seedColor, Theme.of.colorScheme를 사용하면 Material3 디자인 가이드에 따른 색을 쓸 수 있다.

 

---

4. 시나리오 코드

 

(1) ColorScheme을 사용해 색상 지정하기

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title:'MyApp3',
    theme: ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    ),
    home:MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text(
              'My App 3',
              style: TextStyle(
                color: Colors.red
              ),
            ),
          ),
          backgroundColor: Colors.blue,
        )
    );
  }
}

 

 

 

(2) Material 3의 다양한 속성들 사용해보기

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title:'MyApp3',
    theme: ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurpleAccent),
    ),
    home:MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text(
              'My App 3',
              style: TextStyle(
                color: Theme.of(context).colorScheme.primary
              ),
            ),
          ),
          backgroundColor: Theme.of(context).colorScheme.primaryContainer,
          body: Column(
            children: [
              Container(
                color: Theme.of(context).colorScheme.primaryContainer,
                width: 50,
                height: 50,
              ),
              Container(
                color: Theme.of(context).colorScheme.primaryContainer,
                width: 50,
                height: 50,
              ),
              Container(
                color: Theme.of(context).colorScheme.secondary,
                width: 50,
                height: 50,
              ),
              Container(
                color: Theme.of(context).colorScheme.secondaryContainer,
                width: 50,
                height: 50,
              ),
              Container(
                color: Theme.of(context).colorScheme.tertiary,
                width: 50,
                height: 50,
              ),
            ],
          )
        )
    );
  }
}