Flutter

StoreApp - TEXT 넣기

송민경's avatar
송민경
Apr 08, 2024
StoreApp - TEXT 넣기

1. MaterialApp : 새까만 화면

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp()
  }
}
notion image
 

2. Scaffold는 선택적 매개 변수

  • 위젯의 뼈대 제공
notion image
 

3. Row : 새로 정렬하기

children: [] // list의 위젯타입
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(), // 새로 정렬
      ),
    );
  }
}
 

4. Test : 키 값 없이 쓸 수 있는 시그니처 매개변수

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column( // 새로 정렬, 데이터를 여러건 둘 수 있음
          children: [ // list의 위젯타입
            Text("안녕"), // 키값 없이 쓸 수 있는 시그니처 매개변수
            Text("안녕"),],
        ),
      ),
    );
  }
}
notion image
notion image
 

5. 선택하기

CTRL + W
notion image
notion image
 

6. scaffold와 body에 그림을 그리면 됨

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}
class StorePage extends StatelessWidget {
  const StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}
class StorePage extends StatelessWidget {
  const StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(); // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
  }
}
notion image
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold( // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
      body: Column(
        children: [
          Row( // 가로 행
            children: [
              Text("Woman"),
            ],
          ),
        ],
      ),
    );
  }
}
 

6. 자동 정렬 설정하기

notion image
 

실습하기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
      body: Column(
        children: [
          Row(
            // 가로 행
            children: [
              Text("Woman"),
              Text("Kids"),
              Text("Shoes"),
              Text("Bag"),
            ],
          ),
        ],
      ),
    );
  }
}
notion image
 

7. 구조 보기

notion image
notion image
notion image
notion image
  • inSet 영역 : 이미 사용하고 있는 영역, 화면을 가리는 영역
notion image
notion image
 

8. inSet 영역 피하기

  • inSet : 이미 사용하고 있는 영역, 화면을 가리는 영역
notion image
  • 다 계층 구조임
notion image
SafeArea // 시스템 UI를 자동으로 피해줌
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
      body: SafeArea(
        child: Column(
          children: [
            Row(
              // 가로 행
              children: [
                Text("Woman"),
                Text("Kids"),
                Text("Shoes"),
                Text("Bag"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
notion image
 
  • heap에 text를 띄우면서 text의 reference가 저장되는 것
notion image
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0),
              child: Row(
                // 가로 행
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Woman", style: TextStyle(),),
                  Text("Kids"),
                  Text("Shoes"),
                  Text("Bag"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
notion image
notion image
 

11. 글자 굵기 조절하기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0),
              child: Row(
                // 가로 행
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Woman",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text("Kids"),
                  Text("Shoes"),
                  Text("Bag"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
notion image
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 디폴트 생성자 -> 생략 가능

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 페이지 만드는 구조 -> 모든 페이지가 다 가지고 있어야 함
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0),
              child: Row(
                // 가로 행
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Woman",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Kids",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Shoes",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Bag",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
notion image
 
Share article

More articles

See more posts

StoreApp - 이미지 넣기

송민경's avatar
April 8, 2024
StoreApp - 이미지 넣기

StoreApp - Text 간격주기

송민경's avatar
April 8, 2024
StoreApp - Text 간격주기

StoreApp - 기본 셋팅하기

송민경's avatar
April 8, 2024
StoreApp - 기본 셋팅하기

컬렉션과 반복문과 final

송민경's avatar
April 5, 2024
컬렉션과 반복문과 final

vosw1

RSS·Powered by Inblog