happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

텍스트 정렬 지정하기

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

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

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

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

다음과 같이 적용합니다.

child: Text(
    'everdevel',
    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(
            'everdevel',
            style: TextStyle(fontSize: 20, color:Colors.white),
            textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

실행해 봅시다.

text align

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

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

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

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

child: Text(
    'everdevel',
    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(
            'everdevel',
            style: TextStyle(fontSize: 20, color:Colors.white),
            textAlign: TextAlign.right,
        ),
      ),
    );
  }
}

실행해 봅시다.

text align

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

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


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

wedding flower design

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준