1. 이미지 준비하기
2. 이미지 인식시키기
- 펌웨어시 이미지도 같이 가져갈 수 있도록 등록해야 함
- - : 컬렉션
# To add assets to your application, add an assets section, like this: assets: - assets/
- assets/ : 바로 밑에 있는 파일만 인식하고 안에 있는 다른 폴더는 인식 못함
3. 이미지 넣기
- Padding 밑에 넣기
- Image.asser : 자원 찾기 / 이름이 있는 생성자 → 오버로딩 안됨
Image.asset( "assets/bag.jpeg", // "경로" ),
4. 이미지 사이에 간격주기
height: 300,
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.all(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), ), ], ), ), Image.asset( //이름이 있는 생성자 오버로딩 안됨 "assets/bag.jpeg", height: 300, ), Image.asset( "assets/cloth.jpeg", ), ], ), ), ); // 페이지는 Scaffold 구조로 만든다. } }
5. 이미지 꽉 채우기
Expanded( flex: 1, child: Image.asset( "assets/cloth.jpeg", fit: BoxFit.cover, ),
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.all(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, ), ), //이름이 있는 생성자 오버로딩 안됨 Expanded( flex: 1, child: Image.asset( "assets/cloth.jpeg", fit: BoxFit.cover, ), ), //이름이 있는 생성자 오버로딩 안됨 ], ), ), ); // 페이지는 Scaffold 구조로 만든다. } }
6. 가운데 여백주기
SizedBox( height: 10, ),
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.all(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 구조로 만든다. } }
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: 2, ), Expanded( flex: 1, child: Image.asset( "assets/cloth.jpeg", fit: BoxFit.cover, ), ), ], ), ), ); // 페이지는 Scaffold 구조로 만든다. } }
- 자바에서는 이런 식으로 변수에 넣어서 사용 → 플러터는 바로 넣음
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.all(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: 2, ), Expanded( flex: 1, child: Image.asset( "assets/cloth.jpeg", fit: BoxFit.cover, ), ), ], ), ), ); // 페이지는 Scaffold 구조로 만든다. } }
Share article
