[Flutter] Text, Icon, Image

 

 

 

 

Text

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 100,
              fontFamily: 'Futura',
              color: Colors.blue,
            ),
          ),
          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 30,
              fontFamily: 'Futura',
              color: Colors.amber,
            ),
          ),
          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 60,
              fontFamily: 'Futura',
              color: Colors.lightGreen,
            ),
          ),
        ],
      ),
    );
  }
}

 

 

Text 위젯에서는 CrossAxisAlignment.baseline 속성이 사용 가능하다.

여기서 중요한 것은 textBaseline 속성을 지정해 줘야지만 적용이 된다.

TextBaseline 속성은 두 가지 값을 가진다.

 

 

보기엔 두 속성의 차이가 없다.

다음과 같은 차이라고 한다...

 

---

Icon

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        textBaseline: TextBaseline.ideographic,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        children: [
          Icon(
            Icons.widgets,
            size: 100,
            color: Colors.blue,
          ),
          Icon(
            Icons.widgets,
            size: 150,
            color: Colors.cyan,
          ),
        ],
      ),
    );
  }
}

 

 

---

Image

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        textBaseline: TextBaseline.ideographic,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        children: [
          Image.network('https://picsum.photos/200/300'),
        ],
      ),
    );
  }
}