Pageview inside column flutter

To implement a page view inside a column in Flutter, you can use the `PageView` widget along with the `Expanded` widget.

Here’s an example:

    
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page View in Column'),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              children: [
                Container(
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      'Page 1',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Center(
                    child: Text(
                      'Page 2',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
                Container(
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Page 3',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 50,
            color: Colors.yellow,
            child: Center(
              child: Text(
                'Footer',
                style: TextStyle(fontSize: 18),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}
    
  

In this example, we have a `PageView` widget wrapped inside an `Expanded` widget to take all the available vertical space within the `Column`. The `PageView` contains three pages, each represented by a `Container` with a different color. The `Column` also has a footer below the `PageView`.

Make sure to run this code in a Flutter environment to see the result.

Leave a comment