// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; class CardModel { CardModel(this.value, this.size, this.color); int value; Size size; Color color; String get label => 'Card $value'; Key get key => ObjectKey(this); } class PageViewApp extends StatefulWidget { const PageViewApp({super.key}); @override PageViewAppState createState() => PageViewAppState(); } class PageViewAppState extends State<PageViewApp> { @override void initState() { super.initState(); const List<Size> cardSizes = <Size>[ Size(100.0, 300.0), Size(300.0, 100.0), Size(200.0, 400.0), Size(400.0, 400.0), Size(300.0, 400.0), ]; cardModels = List<CardModel>.generate(cardSizes.length, (int i) { final Color? color = Color.lerp(Colors.red.shade300, Colors.blue.shade900, i / cardSizes.length); return CardModel(i, cardSizes[i], color!); }); } static const TextStyle cardLabelStyle = TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold); List<CardModel> cardModels = <CardModel>[]; Size pageSize = const Size(200.0, 200.0); Axis scrollDirection = Axis.horizontal; bool itemsWrap = false; Widget buildCard(CardModel cardModel) { final Widget card = Card( color: cardModel.color, child: Container( width: cardModel.size.width, height: cardModel.size.height, padding: const EdgeInsets.all(8.0), child: Center(child: Text(cardModel.label, style: cardLabelStyle)), ), ); final BoxConstraints constraints = (scrollDirection == Axis.vertical) ? BoxConstraints.tightFor(height: pageSize.height) : BoxConstraints.tightFor(width: pageSize.width); return Container( key: cardModel.key, constraints: constraints, child: Center(child: card), ); } void switchScrollDirection() { setState(() { scrollDirection = (scrollDirection == Axis.vertical) ? Axis.horizontal : Axis.vertical; }); } void toggleItemsWrap() { setState(() { itemsWrap = !itemsWrap; }); } Widget _buildDrawer() { return Drawer( child: ListView( children: <Widget>[ const DrawerHeader(child: Center(child: Text('Options'))), ListTile( leading: const Icon(Icons.more_horiz), selected: scrollDirection == Axis.horizontal, trailing: const Text('Horizontal Layout'), onTap: switchScrollDirection, ), ListTile( leading: const Icon(Icons.more_vert), selected: scrollDirection == Axis.vertical, trailing: const Text('Vertical Layout'), onTap: switchScrollDirection, ), ListTile( onTap: toggleItemsWrap, title: const Text('Scrolling wraps around'), // TODO(abarth): Actually make this checkbox change this value. trailing: Checkbox(value: itemsWrap, onChanged: null), ), ], ), ); } AppBar _buildAppBar() { return AppBar( title: const Text('PageView'), actions: <Widget>[ Text(scrollDirection == Axis.horizontal ? 'horizontal' : 'vertical'), ], ); } Widget _buildBody(BuildContext context) { return PageView( // TODO(abarth): itemsWrap: itemsWrap, scrollDirection: scrollDirection, children: cardModels.map<Widget>(buildCard).toList(), ); } @override Widget build(BuildContext context) { return IconTheme( data: const IconThemeData(color: Colors.white), child: Scaffold( appBar: _buildAppBar(), drawer: _buildDrawer(), body: _buildBody(context), ), ); } } void main() { runApp( const MaterialApp( title: 'PageView', home: PageViewApp(), ), ); }