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(), ], ), ], ), ), ); } }
2. 한번에 정렬하기
- 기본이 가로 행인지 세로 행인지에 따라 같은 키워드지만 값이 달라짐
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"), ], ), ], ), ), ); } }
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"), ], ), ], ), ), ); } }
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"), ], ), ), ], ), ), ); } }
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"), ], ), ), ], ), ), ); } }
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 구조로 만든다. } }
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 구조로 만든다. } }
Share article
