화면 레이아웃 구성 MaterialApp, Text, Scaffold, Appbar

밥이·2022년 5월 10일
0
  • 화면 레이아웃 구성 위젯 작성 MaterialApp, Text, Scaffold, Appbar
  • 위젯 추출해서 코드 나누기 stateless widget
  • Public 위젯과 Private 위젯

main.dart

import 'package:flutter/material.dart'; // StatelessWidget 위젯에 그리기 위한 import
// import 'pages/flutter_home_page.dart';
import 'pages/my_home_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      // home: const FlutterHomePage(),
      home: const MyHomePage(),
      // home: const _MyPrivatePage(),
    );
  }
}

// _언더바를 앞에 붙이면 밖에서 못불러옴. 해당 페이지 안에서만 사용가능
// 해당 파일 안에서만 쓰일때는 _(언더바)를 써서 Private위젯으로 관리
// _언더바를 안쓰면 퍼블릭한 위젯임 아무나 가져다 쓸 수 있음.
/*
class _MyPrivatePage extends StatelessWidget {
  const _MyPrivatePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
              child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
      body: const Center(child: Text('Flutter My Home Page')),
    );
  }
}
*/

my_home_page.dart

import 'package:flutter/material.dart';

// StatelessWidget은 build기반으로 화면을 그린다.
// ↓위젯이라고 불림
class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
              child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
      body: const Center(child: Text('Flutter My Home Page')),
    );
  }
}

flutter_home_page

import 'package:flutter/material.dart';
import 'package:flutter_application_1/pages/my_home_page.dart';

class FlutterHomePage extends StatelessWidget {
  const FlutterHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('Flutter Home Page')),
      ),
      body: const Center(
        child: Text('플러터 홈페이지'),
      ),
    );
  }
}

0개의 댓글