사진을 슬라이드하면서 보고 싶다!

우선, 완성품을 보자!


이런 느낌의 녀석을 만들어 갑니다!
라고 해도, 꽤 편리한 패키지가 있었으므로 그것을 사용해 갑니다!

(오늘은, 히로유키씨의 말투로 써 갑니다.보통으로 기사 쓰기의 질려 왔기 때문에,,)

패키지를 넣을 수 없습니까? 예, 아니오로 대답하십시오.

그게 ~ 패키지 넣어도 괜찮습니까?

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0//追加部分
  smooth_page_indicator: ^0.3.0-nullsafety.0//追加部分

carousel_slider는 이미지를 표시하는 데 사용되는 패키지이며 smooth_page_indicator는 아래의 작은 원을 표시하는 데 사용됩니다.

다음으로 이미지를 준비해도 되나요?

내 이미지를 가득 준비한 나에게 놀랐지?


pubspec.yaml

//省略

flutter:

  uses-material-design: true
  assets:
    - lib/assets/images/ひろゆき1.jpeg
    - lib/assets/images/ひろゆき2.jpeg
    - lib/assets/images/ひろゆき3.jpeg
    - lib/assets/images/ひろゆき4.jpeg
    - lib/assets/images/ひろゆき5.jpeg

그~, 실은 이것으로 준비 끝이군요.

코드를 작성할 수 있습니까?

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final images = [
    "lib/assets/images/ひろゆき1.jpeg",
    "lib/assets/images/ひろゆき2.jpeg",
    "lib/assets/images/ひろゆき3.jpeg",
    "lib/assets/images/ひろゆき4.jpeg",
    "lib/assets/images/ひろゆき5.jpeg",
  ];
  int activeIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CarouselSlider.builder(
                options: CarouselOptions(
                  height: 400,
                  initialPage: 0,
                  viewportFraction: 1,
                  enlargeCenterPage: true,
                  onPageChanged: (index, reason) => setState(() {
                    activeIndex = index;
                  }),
                ),
                itemCount: images.length,
                itemBuilder: (context, index, realIndex) {
                  final path = images[index];
                  return buildImage(path, index);
                },
              ),
              SizedBox(height: 20),
              buildIndicator()
            ],
          ),
        ),
      );

  Widget buildImage(path, index) => Container(
        //画像間の隙間
        margin: EdgeInsets.symmetric(horizontal: 13),
        color: Colors.grey,
        child: Image.asset(
          path,
          fit: BoxFit.cover,
        ),
      );

  Widget buildIndicator() => AnimatedSmoothIndicator(
        activeIndex: activeIndex,
        count: images.length,
        //エフェクトはドキュメントを見た方がわかりやすい
        effect: JumpingDotEffect(
            dotHeight: 20,
            dotWidth: 20,
            activeDotColor: Colors.green,
            dotColor: Colors.black12),
      );
}

코드가 너무 짧기 때문에 이해할 수 있을까요? 그것을 이해할 수 없다면 지능의 문제가 아닐까?

(코멘트 아웃으로 설명 썼습니다.)

CarouselSlider.builder(
                options: CarouselOptions(
                  height: 400,
                  initialPage: 0,
                  //自動再生
                  // autoPlay: true,
                  //左方向に再生したい時trueにする
                  // reverse: true,
                  //自動再生の時の時間間隔
                  //autoPlayInterval: Duration(seconds: 2)
                  //各ページが占めるビューポートの割合。
                  viewportFraction: 1,
                  //画像が変わる時に中心の画像を拡大して、そのほかの画像を縮小する。
                  enlargeCenterPage: true,
                  //画像が変更した時に呼ばれるメソッド
                  onPageChanged: (index, reason) => setState(() {
                    activeIndex = index;
                  }),
                ),
                //並べる画像の個数
                itemCount: images.length,
                //並べる画像のWidgetを生成する
                itemBuilder: (context, index, realIndex) {
                  final path = images[index];
                  return buildImage(path, index);
                },
              ),

marign은 Container 외부로 얼마나 멀리 떨어져 있습니까? 아니야.

  Widget buildImage(path, index) => Container(
        //画像間の隙間
        margin: EdgeInsets.symmetric(horizontal: 13),
        color: Colors.grey,
        child: Image.asset(
          path,
          fit: BoxFit.cover,
        ),
      );

effect는 종류가 많기 때문에, 문서 보는 것이 빠르지 않을까?
htps // 푸 b. 그래서 v / Pac 게이 s / s도 th_Page_Ianka와 r
이 사이트에서 좋아하는 효과를 선택해 주시겠습니까?

  Widget buildIndicator() => AnimatedSmoothIndicator(
        activeIndex: activeIndex,
        count: images.length,
        //エフェクトはドキュメントを見た方がわかりやすい
        effect: JumpingDotEffect(
            dotHeight: 20,
            dotWidth: 20,
            activeDotColor: Colors.green,
            dotColor: Colors.black12),
      );

감상

히로유키의 모노 마네로 기사 쓰기의 즐거웠다.

(그것 당신의 감상이지요!?)