[Flutter_study] Section 6 review

● font 사용하기

- 폰드 다운로드

https://fonts.google.com/

Google Fonts

- 다운 받은 폰트 pubspec.yaml에 추가

https://flutter.dev/docs/cookbook/design/fonts#from-packages

Use a custom font

- pubspec.yaml

  fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

- main.dart에서 사용

Text(
                'Kim Soo Bin',
                style: TextStyle(
                  fontSize: 40.0,
                  fontFamily: 'Pacifico',
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),

 

● icon 사용하기

- 사용할 수 있는 아이콘 검색 -> 이름 알아내기

https://materialdesignicons.com/

Material Design Icons

- main.dart에서 사용

Icon(
                      Icons.email,
                      color: Colors.teal,
                    ),

 

● Card, ListTile 사용하기

- Card

https://flutter.dev/docs/development/ui/layout#card

Layouts in Flutter

- ListTile

https://flutter.dev/docs/development/ui/layout#listtile

Layouts in Flutter

 

● 소스코드

-main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MyApp()
  );
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('images/soobin.jpg'),
              ),
              Text(
                'Kim Soo Bin',
                style: TextStyle(
                  fontSize: 40.0,
                  fontFamily: 'Pacifico',
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                'FLUTTER DEVELOPER',
                style: TextStyle(
                  color: Colors.teal.shade100,
                  fontSize: 20.0,
                  letterSpacing:  2.5,
                  fontWeight: FontWeight.bold,
 
                )
              ),
              SizedBox(
                height: 20.0,
                width: 150.0,
                child: Divider(
                  color: Colors.teal.shade100,
                ),
              ),
              Card(
                  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.phone,
                      color: Colors.teal,
                    ),
                    title: Text(
                      '+44 123 456 789',
                      style: TextStyle(
                        color: Colors.teal.shade900,
                        fontFamily: 'Source Sans Pro',
                        fontSize: 20.0,
                      ),
                    ),
                  )),
              Card(
                  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.email,
                      color: Colors.teal,
                    ),
                    title: Text(
                      'tnqlsqks27@gmail.com',
                      style: TextStyle(
                          fontSize: 20.0,
                          color: Colors.teal.shade900,
                          fontFamily: 'Source Sans Pro'),
                    ),
                  ))
            ],
          )
        )
      )
    );
  }
}

 

-pubspec.yaml

name: mi_card
description: A new Flutter application.
 
version: 1.0.0+1
 
environment:
  sdk: ">=2.1.0 <3.0.0"
 
dependencies:
  flutter:
    sdk: flutter
 
  cupertino_icons: ^0.1.2
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
flutter:
 
  uses-material-design: true
  assets:
    - images/
 
  fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf
 
 
 

 

실행 결과