Blockquote

how to create list view like this how to create this type layout in flutter

CodePudding user response：

I will suggest you look at

https://api.flutter.dev/flutter/material/TabPageSelector-class.html

In order to create the three dots on the bottom. And then look also at:

https://api.flutter.dev/flutter/material/TabBarView-class.html

In order to create the view that you prefer.

CodePudding user response：

you can copy the whole code in below

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PageController controller;
  double page = 0.0;
  @override
  void initState() {
    super.initState();
    controller = PageController(viewportFraction: 0.5)
      ..addListener(() {
        setState(() {
          page = controller.page!;
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade100,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(26),
            color: Colors.white,
          ),
          child: Column(children: [
            Text(
              'head widgets',
              style: TextStyle(
                fontSize: 12,
                color: Colors.grey.shade500,
              ),
            ),
            Expanded(
              child: PageView.builder(
                controller: controller,
                itemCount: pages.length,
                itemBuilder: (context, index) {
                  if (index == page) {
                    return Transform.scale(
                      scale: 1,
                      child: pages[index],
                    );
                  } else if (index < page) {
                    return Transform.scale(
                      scale: max(1 - (page - index), 0.75),
                      child: pages[index],
                    );
                  } else {
                    return Transform.scale(
                      scale: max(1 - (index - page), 0.75),
                      child: pages[index],
                    );
                  }
                },
              ),
            ),
            Text(
              'indicator',
              style: TextStyle(fontSize: 12),
            )
          ]),
        ),
      ),
    );
  }

  List<Widget> pages = [
    FlutterLogo(
      size: 100,
    ),
    FlutterLogo(
      size: 100,
    ),
    FlutterLogo(
      size: 100,
    ),
  ];
}

and the result