Flutter

StoreApp - Text 간격주기

송민경's avatar
송민경
Apr 08, 2024
StoreApp - Text 간격주기

1. 하나하나 정렬하기

Spacer(), // 남는 공간 차지하기
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: [
                Spacer(),
                Text("Woman"),
                Spacer(),
                Text("Kids"),
                Spacer(),
                Text("Shoes"),
                Spacer(),
                Text("Bag"),
                Spacer(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
notion image
notion image
notion image
 

2. 한번에 정렬하기

  • 기본이 가로 행인지 세로 행인지에 따라 같은 키워드지만 값이 달라짐
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: [
            Row( // 가로 행
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("Woman"),
                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: [
            Row(
              // 가로 행
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Woman"),
                Text("Kids"),
                Text("Shoes"),
                Text("Bag"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
notion image
 

3. Text 위 아래 간격 주기

  • padding은 있으나 margin은 없음!
Padding(); // 간격주기
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(8.0),
              child: Row(
                // 가로 행
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Woman"),
                  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"),
                  Text("Kids"),
                  Text("Shoes"),
                  Text("Bag"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
notion image
 

4. Padding 사용하기

padding: const EdgeInsets.symmetric(vertical: 25),
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(
      debugShowCheckedModeBanner: false, // 배너 해제
      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.symmetric(vertical: 25),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween, // space랑 동일
                children: [
                  Text(
                    "Woman",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ), // Text 상태변수
                  Text(
                    "Kids",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Shoes",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Bag",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Image.asset(
                "assets/bag.jpeg",
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Expanded(
              flex: 1,
              child: Image.asset(
                "assets/cloth.jpeg",
                fit: BoxFit.cover,
              ),
            ),
          ],
        ),
      ),
    ); // 페이지는 Scaffold 구조로 만든다.
  }
}
notion image
 
padding: const EdgeInsets.only(
   left: 10, right: 20, top: 50, bottom: 5),
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(
      debugShowCheckedModeBanner: false, // 배너 해제
      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.only(
              left: 10, right: 20, top: 50, bottom: 5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween, // space랑 동일
                children: [
                  Text(
                    "Woman",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ), // Text 상태변수
                  Text(
                    "Kids",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Shoes",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Bag",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Image.asset(
                "assets/bag.jpeg",
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Expanded(
              flex: 1,
              child: Image.asset(
                "assets/cloth.jpeg",
                fit: BoxFit.cover,
              ),
            ),
          ],
        ),
      ),
    ); // 페이지는 Scaffold 구조로 만든다.
  }
}
notion image
 
Share article

More articles

See more posts

RecipeApp - 기본 화면 만들기

April 9, 2024
RecipeApp - 기본 화면 만들기

StoreApp - 이미지 넣기

April 8, 2024
StoreApp - 이미지 넣기

StoreApp - TEXT 넣기

April 8, 2024
StoreApp - TEXT 넣기

StoreApp - 기본 셋팅하기

April 8, 2024
StoreApp - 기본 셋팅하기

vosw1

RSS·Powered by Inblog