写真をスライドしながら見たい！[Flutter]

#写真をスライドしながら見たい！
まずは、完成品を見てみよう！

こんな感じのやつを作っていきます！
っと言っても、かなり便利なパッケージがあったのでそれを使っていきます！

（今日は、ひろゆきさんの口調で書いていきます。普通に記事書くの飽きてきたので、、）

#パッケージ入れてもらえませんか？はいか、いいえで答えてください。

あのぉ〜、パッケージ入れてもらってもいいですか？

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は種類が多いので、ドキュメント見た方が早くないすか？
https://pub.dev/packages/smooth_page_indicator
このサイトで好きなエフェクト選んでもらっていいすか？

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

#感想
ひろゆきのモノマネで記事書くの楽しかった。

(それあなたの感想ですよね！？)