2024 .09. 04 flutter 레이아웃

class_flutter_demo1 프로젝트 생성

 

 

 

 

assets 폴더 생성 후 이미지 2개 폴더안에 저장

 

 

 

pubspec.yaml 파일에서 내려가면 asset 파일이 있는데 

아래와 같이 변경한다.

 

변경후 Pub get을 누르면 적용된다.

 

 

import 'package:flutter/material.dart';

// 수입하다. material.dart
// 코드의 진입점
void main() {
  runApp(const MyApp());
}

// 자동정렬 ctrl + alt + L

// 처음부터 위젯을 개발하는 것은 매우 힘들다. --> 상속, 구현받아서 개발을 진행한다.

// stl 누르면 된다.
class MyApp extends StatelessWidget {
  // 멤버 변수 선언 영역
  // 함수 선언 영역

  // 생성자
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 지역 변수 선언 가능, 코드 작성 가능
    print('build() 메서드 호출');

    return MaterialApp(
      // 디버그 모드 : 활성화  (키, 값)구조
      debugShowCheckedModeBanner: true,
      //  home: new StorePage() -> new 생략가능
      home: new StorePage(),
    );
  } // end of build
} // end of MyApp class

// stl 엔터 누르면 자동 완성된다.
class StorePage extends StatelessWidget {
  // 멤버 변수 선언 영역
  // 함수 선언 영역

  // 생성자
  const StorePage({super.key});

  // Scaffold - 시각적 레이아웃 구조를 만들어주는 위젯
  // 위젯은 -- 부모가 될 수 있는 위젯이 있고, 자식만 될 수 있는 위젯이 존재한다.
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        //  Scaffold 에 alt + enter 누르고 wrap with 위젯 클릭
        // 바디 영역 테스트를 적는다.
        body: Column(
          // ctrl + space 누른 후 children: [] 선택
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0),
              child: Row(
                // // Row 에 alt + enter 누르고  padding 클릭
                children: [
                  Text(
                    "Woman",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                  ),

                  // 여백공간 차지
                  Spacer(),

                  Text(
                    "Kids",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                  ),

                  // 여백공간 차지
                  Spacer(),

                  Text(
                    "shose",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                  ),

                  // 여백공간 차지
                  Spacer(),

                  Text(
                    "bag",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                  )
                ],
              ),
            ),
            Expanded(
                flex: 1,
                child: Image.asset(
                  fit: BoxFit.cover,
                  "assets/bag.jpeg",
                ),
            ),

            const SizedBox(height: 2,), // 공간 박스 높이

            // // Image 에 alt + enter 누른 후 위젯 클릭 후 Image 를 Expanded로 변경
            Expanded(
                flex: 1,
                child: Image.asset(
                  fit: BoxFit.cover,
                  "assets/cloth.jpeg",
                ),
            ),

          ],
        ),
      ),
    );
  }
}

 

 

완성본