Flutter 이미지 나열하기 (GridView 사용법) feact.(Image.network)

이번에는 이미지를 나열해 보겠다

이때는 GridView라는 것을 사용해 보도록 한다

 

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  
  	List<String> imagePath = [
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
    ];
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: [],
        ),
      ),
    );
  }
}

우선 사용할 이미지 경로 리스트를 준비한다

 

2. GridView.builder

GridView안에는 여러 Constructor가 있는데 그중에 builder를 제일 많이 사용한다

일단 아래의 코드를 작성해 보자

practice_page.dart

Expanded(
  child: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 3,
    ),
    itemCount: 20,
    itemBuilder: (context, index) {
      return Image.asset(imagePath[index], fit: BoxFit.cover);
    },
  ),
),

화면에 이미지들이 많아서 Overflow가 되기 때문에 Expanded을 사용했다

crossAxisSpacing: 가로 Padding

mainAxisSpacing: 새로 Padding

crossAxisCount: 1개의 행에 보여질 이미지 수 

itemCount: 표시할 이미지 수 (총 이미지 개수를 넘어가면 안 된다)

itemBuilder: 이미지 개수만큼 반복문 (여기서 Image요소를 생성한다)

 

3. 결과

이렇게 이미지들이 잘 나열된 것을 확인할 수 있다

 

4. Image.network

Image.network는 로컬 폴더에 있는 이미지를 가져오는 게 아니라, 실제 웹상에 있는 이미지를 가져올 수 있도록 한 것이다

practice_page.dart

Image.network("https://picsum.photos/id/${index + 1}/200/200");

https://picsum.photos는 무료로 이미지를 받을 수 있는 사이트다

위와 같이 Image.network(URL); 를 해주면 받아 올 수 있다

아래와 같이 결과가 출력된다