Блог

 Center(
                          child: CarouselSlider(
                        options: CarouselOptions(
                          height: 250,
                          aspectRatio: 4 / 3,
                          viewportFraction: 0.65,
                          initialPage: 0,
                          enableInfiniteScroll: true,
                          reverse: false,
                          autoPlay: true,
                          autoPlayInterval: Duration(seconds: 3),
                          autoPlayAnimationDuration:
                              Duration(milliseconds: 800),
                          autoPlayCurve: Curves.fastOutSlowIn,
                          enlargeCenterPage: true,
                          scrollDirection: Axis.horizontal,
                        ),
                        items: [
                          'Purchases in last 3 Months',
                          'Purchases in last 6 Months',
                          'Purchases in last 12 Months'
                        ].map((i) {
                          return Builder(
                            builder: (BuildContext context) {
                              return Container(
                                  width: MediaQuery.of(context).size.width,
                                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                                  decoration: BoxDecoration(
                                      color: Colors.amber,
                                      borderRadius: BorderRadius.only(
                                          topRight: Radius.circular(10.0),
                                          bottomRight: Radius.circular(10.0),
                                          topLeft: Radius.circular(10.0),
                                          bottomLeft: Radius.circular(10.0))),
                                  child: Align(
                                      alignment: Alignment(0, -0.85),
                                      child: Text(
                                        '$i',
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            fontSize: 25.0,
                                            fontFamily: 'JosefinSans',
                                            fontWeight: FontWeight.w800),
                                      )));
                            },
                          );
                        }).toList(),
                      ))
 

https://i.gadgets360cdn.com/large/amazon_india_1599209689760.jpg

Например, в Insights есть эти 2 карточки с бирюзовым цветом сверху, а остальные белые, а текст написан в центре. Я хочу создать что-то подобное.

Это основной шаблон страницы, которую вы предоставили.

Постройте на нем.

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff153f6e),
          title: Text(
            'Amazon.in Prime',
          ),
          centerTitle: true,
        ),
        body: Stack(
          children: [
            Column(
              children: [
                Container(color: Colors.grey, height: 200),
                Container(),
              ],
            ),
            Positioned(
              top: 125,
              left: 75,
              child: Container(
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Color(0xFFe0f2f1)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}