happy cat image

everdevel

coding

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
























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

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

Center 위젯

위젯을 화면의 가운데로 정렬해볼게요.

그럴려면 위젯 Center를 사용합니다.

Center 위젯 사용하기

현재 사용중인 Text를 Center로 감싸야합니다.

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

위의 코드에서 child에 Center 위젯을 추가하고 Center에 위젯을 추가하므로 child를 사용 후 Text위젯을 넣습니다.

하다보면 익숙해 지지만 처음에는 상당히 어려울거에요.

즉 위젯을 추가하고 그 안에 위젯을 하나 더 추가하려면 child를 사용하고 위젯을 추가합니다.

우선은 손에 익히도록 하기 위해 직접 타이핑해서 적응합시다.

그리고 이것을 매우 간단하게 해주는 단축키도 있습니다.

단축키도 설명해 드릴게요.

우선 위의 코드를 다음과 같이 변경합니다.

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

그럼 MyApp 클래스는 다음과 같습니다.

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

이번엔 앱의 세로도 가운데 정렬되어 정중앙에 위치해있네요.


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

농구 황제가 아닌 인간 마이클 조던의 삶, 그가 거둔 무수한 실패와 성공을 기록한 책. “우리가 몰랐던 이야기……. 빛나는 영웅의 삶 이면에 존재하던 외롭고 자존심 강한 한 남자를 매우 흥미롭게 파고들었다.” - 《퍼블리셔스 위클리》

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


    
    

강좌로 돌아가기

댓글 0개

정렬기준