본문 바로가기

Flutter

flutter App화면 구현

import 'package:flutter/material.dart';

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

// 처음부터 위젯을 개발하는 것은 힘들다. --> 상속, 구현받아서 개발을 진행한다.
class MyApp extends StatelessWidget {
  // 멤버 변수 선언 영역
  // 함수 선언 영역

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

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

    return MaterialApp(
      debugShowCheckedModeBanner: true,
      home: StorePage(),
    );
  } // end of build
} // end of MyApp class

class StorePage extends StatelessWidget {
  const StorePage({super.key});

  // Scaffold - 시각적 레이아웃 구조를 만들어주는 위젯
  // 위젯은 -- 부모가 될수 있는 위젯이 있고, 자식만 될 수 있는 위젯이 존재한다.
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(25.0),
            child: Row(
              children: [
                Text(
                  "Woman",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                Text(
                  "Kids",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                Text(
                  "shoes",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                Text(
                  "Bag",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                )
              ],
            ),
          ),
        ],
      )),
    );
  }
}

 

728x90

'Flutter' 카테고리의 다른 글

플러터 기본기 다지기 - 1  (1) 2024.11.05
Flutter UI 프레임워크  (4) 2024.11.05
컬렉션(자료구조)  (0) 2024.09.04
변수  (1) 2024.09.04
프로젝트 구조 살펴보기  (0) 2024.09.04