[flutter] Building layouts - Doc 1

https://docs.flutter.dev/ui/layout/tutorial

Building layouts

 

 

 

 

 

Expanded 위젯 안에 Column을 넣으면 해당 row에서 남아있는 모든 여유 공간을 사용하여 column을 늘립니다. crossAxisAlignment 속성을 CrossAxisAlignment.start로 설정하면 column이 row의 시작 부분에 위치하게 됩니다.

 

 

💡 Context의 사용 사례

• 테마 데이터 가져오기 Theme.of(context)를 사용하여 현재 테마 데이터에 액세스할 수 있습니다.
• Navigator 사용하기 페이지 전환을 위해 Navigator.of(context)를 사용할 수 있습니다.
• 상위 위젯에서 제공된 데이터에 액세스 Provider 패키지나 InheritedWidget을 사용하여 context를 통해 데이터에 액세스할 수 있습니다.

 

💡 BuildContext란

context는 위젯의 현재 위치와 관련된 정보를 포함하는 객체입니다. 이를 사용하여 위젯 트리의 다른 부분과 상호 작용하거나, 특정 메타데이터를 얻거나, 상위 위젯에서 제공된 데이터에 액세스할 수 있습니다.

 

 

💡 ListView

Flutter에서 가장 흔히 사용되는 스크롤 가능한 위젯 중 하나입니다. 주로 긴 목록의 항목을 표시하는 데 사용되며, 각 항목은 위젯으로 구성됩니다.

 

주요 속성

• scrollDirection: 스크롤 방향을 결정합니다. 기본적으로 수직(Axis.vertical)입니다.
• reverse: 이 값이 true로 설정되면 목록의 순서가 반대로 표시됩니다.
• shrinkWrap: ListView의 높이가 자식 위젯의 합계 높이와 동일하게 설정되어야 할 때 true로 설정합니다.
• padding: 각 항목 주위의 패딩을 설정합니다

 

주요 함수

• ListView.builder: 대규모 목록을 위한 생성자입니다. itemBuilder를 통해 목록 항목을 동적으로 생성하며, itemCount로 항목 수를 지정합니다. 이는 메모리 효율을 위해 현재 화면에 표시되는 항목만 렌더링합니다.
• ListView.separated: ListView.builder와 유사하지만, 두 항목 사이에 분리자 위젯을 추가할 수 있습니다. separatorBuilder를 사용하여 분리자를 지정합니다.
• ListView.custom: 사용자 정의 자식 모델로 목록 뷰를 만듭니다. childrenDelegate를 사용하여 어떻게 항목이 구성되어야 하는지 지정합니다.
• ListView.fixed: 고정된 항목 수를 가진 목록을 생성합니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// 상태가 없는 위젯 정의
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 함수 만들기 버튼 섹션
  Column _buildButtonColumn(Color color, IconData icon, String label) {
    return Column(
      children: [
        Icon(
          icon,
          color: color,
        ),
        Container(
          margin: const EdgeInsets.only(top: 8),
          child: Text(
            label,
            style: TextStyle(
                fontSize: 12, fontWeight: FontWeight.bold, color: color),
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // build 함수에 구현 부(몸체)
    // 지역 변수 선언 -
    // 위젯은 부모가 될 수 있는 위젯가 아닌 위젯이 존재 한다.
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            child: Column(
              // 교차축 정렬 속성
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Text(
                    "Oeschinen Lake Campground",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  padding: EdgeInsets.only(bottom: 8),
                ),
                Text(
                  "Kandersteg, Switzerland",
                  style: TextStyle(fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          const Text("41"),
        ],
      ),
    );

    // 앱 테마 객체가 들고 있는 primaryColor 지정된 색상을 들고 올 수 있다.
    Color color = Theme.of(context).primaryColor;

    Widget buttonSection = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildButtonColumn(color, Icons.call, 'CALL'),
        _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
        _buildButtonColumn(color, Icons.share, 'SHARE'),
      ],
    );

    Widget textSection = Container(
      padding: const EdgeInsets.all(32),
      child: const 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 '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        '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 : 텍스트는 그 경계를 넘지 않게 다음 줄로 자동으로 줄 바꿈 됩니다.
        // softWrap - false : 텍스트는 줄바꿈 되지 않고 그 경계를 넘어갈 수 있습니다.
      ),
    );

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Layout demo'),
          backgroundColor: Colors.orange,
        ),
        body: ListView(
          children: [
            Image.asset(
              "assets/images/lake.jpeg",
              width: 620,
              height: 240,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}

 

 

 

실행 결과