inblog logo
|
vosw1
    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

    vosw1

    RSS·Powered by Inblog