플러터 튜토리얼 - Text, Icon, Image 위젯 학습

안녕하세요.

이번 시간에 화면에 정보를 줄 수 있는 Text, Icon, Image 위젯에 대해서 학습을 하겠습니다 :)

 

1. Text

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title)
      ),
      body: Container(
        child: const Center(
          child: Text("Hello Widget", style: TextStyle(fontWeight: FontWeight.bold))
        ),
      )
    );
  }

Text 위젯은 앞에서의 강의 중 Hello World를 출력할 때 사용을 한 위젯이에요 :)

스타일이 필요한 경우는 style 속성에 TextStyle을 입력해주시면 되겠습니다. (fontSize, color 등 입력 가능)

 

2. Image

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title)
      ),
      body: Container(
        child: Center(
          child: Image.asset('assets/flutter-logo.png')
        ),
      )
    );
  }

Imgae를 사용하기 위해서는 pubspec.yml에 assets을 추가시켜 주셔야 돼요.

네트워크에서 가지고 오는 경우는, Image,network()를 사용.

 

3. Icon

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title)
      ),
      body: Container(
        child: const Center(
          child: Icon(Icons.favorite)
        ),
      )
    );
  }

플러터에서는 제공해주는 아이콘이 있기 때문에, 필요하실 때 아이콘을 정말 편하게 사용을 하실 수 있어요.

 

[0] Icon 종류

https://api.flutter.dev/flutter/material/Icons-class.html