텍스트 정렬 지정하기

이번에는 텍스트를 가운데 정렬해볼게요.

텍스트를 가운데로 정렬하기

정렬은 style에 종속되지 않습니다. style과 동등합니다.

textAlign속성을 사용하고 값으로 TextAlign.center를 사용합니다.

다음과 같이 적용합니다.

child: Text(
    'pinkcoding',
    style: TextStyle(fontSize: 20, color:Colors.white),
    textAlign: TextAlign.center,
),

그럼 적용해보면

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        color: Colors.red,
        child: Text(
            'pinkcoding',
            style: TextStyle(fontSize: 20, color:Colors.white),
            textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

실행해 봅시다.

가운데로 정렬되었습니다.

왼쪽으로 정렬하거나 오른쪽으로 정렬하려면 어떻게 해야하는지 감이 오시죠?

center대신 left또는 right를 적습니다.

텍스트를 오른쪽으로 정렬하기

child: Text(
    'pinkcoding',
    style: TextStyle(fontSize: 20, color:Colors.white),
    textAlign: TextAlign.right,
),

그럼 적용해보면

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        color: Colors.red,
        child: Text(
            'pinkcoding',
            style: TextStyle(fontSize: 20, color:Colors.white),
            textAlign: TextAlign.right,
        ),
      ),
    );
  }
}

실행해 봅시다.

그런데 여전히 상단에 있어서 보기가 어렵네요.

다음에는 화면의 가운데에 출력해 봅시다.