Flutter Demo: PageView橫向使用

• video

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PageController ctrl = PageController(
    viewportFraction: 0.8,
  );

  List<SliderItem> sliders = [];
  String activeTag = 'anime';
  int currentPage = 0;

  @override
  void initState() {
    super.initState();
    _query();
    ctrl.addListener(() {
      int next = ctrl.page.round();
      if (currentPage != next) {
        setState(() {
          currentPage = next;
        });
      }
    });
  }

  _query({String tag = 'anime'}) {
    List<SliderItem> s =
        data.where((slider) => slider.tag.contains(tag)).toList();

    print(s.length);
    setState(() {
      sliders = s;
      activeTag = tag;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        itemBuilder: (context, int index) {
          if (index == 0) {
            return _buildTagPage();
          } else if (sliders.length >= index) {
            bool active = currentPage == index;
            return _buildStoryPage(sliders[index - 1], active);
          } else {
            return Text('Not Data.');
          }
        },
        scrollDirection: Axis.horizontal,
        controller: ctrl,
        itemCount: sliders.length + 1,
      ),
    );
  }

  _buildButton(String tag) {
    Color color = tag == activeTag ? Colors.purple : Colors.white;
    return FlatButton(
      color: color,
      child: Text('#$tag'),
      onPressed: () => _query(tag: tag),
    );
  }

  Widget _buildTagPage() {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            '選擇你喜歡的標籤: ',
            style: Theme.of(context).textTheme.title,
          ),
          _buildButton('anime'),
          _buildButton('girl'),
          _buildButton('jojo'),
        ],
      ),
    );
  }

  Widget _buildStoryPage(SliderItem slider, bool active) {
    final double blur = active ? 30 : 0;
    final double offset = active ? 20 : 0;
    final double top = active ? 100 : 200;
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      curve: Curves.easeOutQuint,
      margin: EdgeInsets.only(top: top, left: 10, right: 10, bottom: 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          image: NetworkImage(slider.img),
          fit: BoxFit.cover,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black87,
            blurRadius: blur,
            offset: Offset(offset, offset),
          ),
        ],
      ),
      child: Center(
        child: Text(
          slider.title,
          style: TextStyle(
            fontSize: 40,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

List<SliderItem> data = [
  SliderItem(
    img: 'https://s2.ax1x.com/2019/07/02/ZJHheP.jpg',
    tag: ['anime', 'girl'],
    title: 'Anime1',
  ),
  SliderItem(
    img: 'https://s2.ax1x.com/2019/07/02/ZJHWLt.jpg',
    tag: ['anime', 'girl'],
    title: 'Anime2',
  ),
  SliderItem(
    img: 'https://s2.ax1x.com/2019/07/02/ZJHRsI.jpg',
    tag: ['anime', 'jojo'],
    title: 'Anime3',
  ),
];

class SliderItem {
  SliderItem({this.img, this.tag, this.title});
  final String img;
  final List<String> tag;
  final String title;
}