기본 Layout 예제 만들기 (4)

 

텍스트 섹션을 변수로 정의합니다. 

텍스트를 컨테이너에 넣고 각 가장자리를 따라 패딩을 추가합니다. 

buttonSection 선언 바로 아래에 다음 코드를 추가합니다.

 

lib/main.dart (textSection)

Widget textSection = const Padding(
  padding: EdgeInsets.all(32),
  child: Text(
    'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
    'Alps. Situated 1,578 meters above sea level, it is one of the '
    'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
    'half-hour walk through pastures and pine forest, leads you to the '
    'lake, which warms to 20 degrees Celsius in the summer. Activities '
    'enjoyed here include rowing, and riding the summer toboggan run.',
    softWrap: true,
  ),
);

softwrap을 true로 설정하면 텍스트 줄은 단어 경계에서 줄 바꿈하기 전에 열 너비를 채웁니다.

 

body 에 아래 코드를 추가합니다. 

....
body: Column(
  children: [
    titleSection,
    buttonSection,
    textSection  // add
  ]
),
....

 

textSection 은 Padding 위젯을 이용해 모든방향으로 32px 의 padding 을 줍니다. 

Padding 위젯의 child 는 Text 위젯을 사용하고 우리는 본문의 가장 큰 contents 영역을 구성합니다.

 

 

 

assets/images 디렉토리를 생성하자 (프로젝트 바깥쪽에)

 

아래 이미지를 다운 받자

lake.jpg.

 

다운 받은 이미지를 assets/images 디렉토리에 추가 하자

 

pubspec.yaml 을 에 assets/images 경로를 추가 하자

 

pubspec.yaml 상단에 Pug.get 실행

lib/main.dart (add image)

...
body: Column(
    children: [
      Image.asset(
        "assets/images/lake.jpg",
        width: 600,
        height: 240,
        fit:  BoxFit.cover,
      ),
      titleSection,
      buttonSection,
      textSection
    ]
),
...

 

이제 마지막으로 

body:Column ===> body:ListView 로 변경하자

앱이 작은 장치에서 실행될 때 ListView가 앱 본문 스크롤을 지원하기 때문에 

열이 아닌 ListView 를 사용하자

최종 실행 모습

 

 

 

 

관련영상

https://youtu.be/HTH59lypTRM