Flutter) RichText 위젯

해당 텍스트를 보이게 하려면 어떻게 해야 할까요?

 

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Hello ", style: TextStyle(fontSize: 48, color: Colors.yellow),),
              Text("World ", style: TextStyle(fontSize: 48, color: Colors.red, fontWeight: FontWeight.bold),),
              Text("~!!", style: TextStyle(fontSize: 48, color: Colors.yellow),),
            ],
          ),
        ),
      ),
    );
  }
}

이런식으로도 가능하지만 이를 묶어서 관리하는 위젯이 RichText 

 

RichText 사용

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: RichText(
            text: TextSpan(
              style: TextStyle(color: Colors.yellow, fontSize: 48),
              children: [
                TextSpan(text: "Hello "),
                TextSpan(text: "World ", style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),),
                TextSpan(text: "~!!"),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

이런식으로 바탕이 되는 설정을 지정하고, 따로 설정하고 싶은 부분만 style을 주면 손쉽게 관리할 수 있습니다.