CLASS app

Flutter

텍스트 정렬 지정하기

텍스트 정렬 지정하기

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

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

정렬은 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,
        ),
      ),
    );
  }
}

실행해 봅시다.

text align

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

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

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,
        ),
      ),
    );
  }
}

실행해 봅시다.

text align

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

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





댓글 0개

정렬기준

PinkCoding

PinkCoding

X

PinkCoding

Web Scratch Pad

X

loading

            
            
        

컨텐츠로 돌아가기