[TAVE/Study] Do it! Flutter 4장 플러터 위젯 사용법①

210920 월

머티리얼 디자인

 

📌 앱의 디자인을 통일시키기 위한 플랫 디자인.

📌 앱의 용량을 줄이고 속도를 개선할 수 있다.

 

 

스캐폴드 이용하기

 

📌 스캐폴드 클래스: 각종 위젯을 머티리얼 디자인 레이아웃으로 설계하는 것을 돕는다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MaterialFlutterApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MaterialFlutterApp();
  }
}
class _MaterialFlutterApp extends State<MaterialFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    );
  }
}

 

 

제목 줄 추가하기

 

floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
	onPressed: () {
}),

👉🏻 AppBar: 버튼이나 아이콘 이미지 등을 넣을 수 있다.

👉🏻 플로팅 버튼: 오른쪽 아래에 떠 있는 듯한 버튼

✍🏻 컨테이너: 위젯을 담아 관리하는 상자

 

 

위젯을 여러 개 만들기

 

body: Container(
  child: Center(
    child: Column(
      children: <Widget>[Icon(Icons.android), Text('android')],
      mainAxisAlignment: MainAxisAlignment.center,
    ),
  ),
),

👉🏻 Row, Column: 위젯을 여러 개 만들어 준다. children을 이용해 배열 형태로 선언한다.

✍🏻 Center: 가로 정렬, MainAxisAlignment.center: 세로 정렬

 

 

이미지 표시하기

 

flutter:
  uses-material-design: true
  assets:
    - image/flutter.png

👉🏻 플러터에서는 이미지를 추가하려면 이미지 저장을 하고나서 pubspec.yaml 파일에 위와 같은 코드를 추가해야 한다.

import 'package:flutter/material.dart'
import 'imageWidget.dart';


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

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

lib/main.dart

class _ImageWidgetApp extendsState<ImageWidgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Widget'),),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset('image/flutter.png', width: 200, height: 100, fit: BoxFit.fill,),
            ],
          ),
        ),
      ),
    );
  }
}

lib/imageWidget.dart

👉🏻 앱에 포함된 이미지를 호출하는 방법: file, asset, memory

✍🏻 asset은 앱을 만들 때 미리 넣어놓은 파일을 사용하는 경우이다.

✍🏻 BoxFit: 이미지를 원하는 형태로 표시한다. 옵션값으로 fill, contain, cover, fitWidth, fitHeight, none, scaleDown이 있다.

 

 

폰트 변경하기

 

  fonts:
    -family: Pacifico
      fonts:
        -asset: font/Pacifico-Regular.ttf
          weight: 400

pubspec.yaml

              Text('Hello Flutter',
                    style: TextStyle(fontFamily: 'Pacifico',
                    fontSize: 30, color: Colors.blue),
              )

lib/imageWidget.dart

👉🏻 폰트 불러오는 코드 추가