[Flutter] 기본 위젯 4 개 : 이미지, 텍스트, 아이콘, 박스

 

플러터 프로젝트를 켜고 첫 번째로 할 일

1. main 함수 빼고 다 지워줍니다.

2. stless를 입력해서 StatelessWidget 한 개를 커스텀으로 생성합니다.

3. Widget build 메소드 안에 있는 Container를 지웁니다.

4. 그 자리에 MaterialApp();을 작성합니다.

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      )
    );
  }
}

이미지 위젯

Image.asset('assets/img.jpg')

경로를 입력할 때에는 pubsec.yaml 파일을 수정해야 합니다.

assets 폴더의 자료를 모두 사용하겠다면

flutter :
  assets :
    - assets/

위와 같이 세팅해주어야 합니다.

텍스트 위젯

 

Text('Hey')

아이콘 위젯

Icon(Icons.shop)

앱을 개발하면서 무료 아이콘을 사용하고 싶은가요?

구글에서 만든 Materal과 애플에서 만든 Cupetino 스타일이 있습니다.

플러터는 머티리얼을 기본으로 하기 때문에

별도의 설정 없이 아이콘의 아이디만 알고있다면 머티리얼 아이콘을 불러올 수 있습니다.

 

 

머티리얼 아이콘 ID 찾기

 

박스 위젯

home: Center(
  child: Container(width: 50, height: 50, color: Colors.blue),
)

박스를 만들어 주는 컨테이너 위젯입니다.

어느 지점부터 50*50크기인지 결정해줄 Center라는 부모가 필요합니다.

설정하지 않으면 파란색 박스가 화면을 가득 채워버립니다.