容器的顶部是彩色的，但其余部分是白色的。如何在颤动中做到这一点？

Posted 2023-02-23

【中文标题】容器的顶部是彩色的，但其余部分是白色的。如何在颤动中做到这一点？

【英文标题】：Top section of container is coloured but the rest is white. How to do it in flutter?

【发布时间】：2021-03-20 12:37:28

【问题描述】：

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 张卡片顶部是蓝绿色，其余的是白色，而文字写在中间。我想设计类似的东西。

【问题讨论】：

尝试使用 Stack() 并将蓝绿色部分放在顶部

【参考方案1】：

这是您提供的页面的基本模板。

以此为基础。

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)),
              ),
            ),
          ],
        ),
      ),
    );