Question

图标设置为行，但靛蓝设置为整个应用程序背景，我想将行颜色仅设置为图标的背景，然后将下一个滑块显示为图标，并将滑块背景颜色设置为白色。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//Now we need multiple widgets into a parent = "Container" widget

Widget buildButton(IconData icon, String buttonTitle) {
  final Color tintColor = Colors.white;
  return new Column(
    children: <Widget>[
      new Icon(icon, color: tintColor),
      new Container(
        margin: const EdgeInsets.only(top: 5.0),
        child: new Text(
          buttonTitle,
          style: new TextStyle(
              fontSize: 10.0,
              fontWeight: FontWeight.w600,
              color: tintColor),
          textAlign: TextAlign.center,
        ),
      )
    ],
  );
}

//build function returns a "Widget"
return new MaterialApp(home: new Scaffold(body: new Builder(
  builder: (BuildContext context) {
    return new Stack(
      children: <Widget>[
        new Container(
          padding: const EdgeInsets.all(15.0),
          color: Colors.indigo,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new Container(height: 40.0, color: Colors.amber, child: null),
              //build in a separated function
              buildButton(Icons.library_books, "Quick Quotation"),
              buildButton(Icons.fiber_new, "New user Zone"),
              buildButton(Icons.video_library, "WAtch Video"),
              buildButton(Icons.contact_phone, "Contact Us"),
            ],
          ),
        ),
        new Container(
          margin: const EdgeInsets.only(top: 50.0),
          child: new ListView.builder(
            padding: EdgeInsets.symmetric(vertical: 16.0),
            itemBuilder: (BuildContext context, int index) {
              if (index % 2 == 0) {
                return _buildCarousel(context, index ~/ 2);
              } else {
                return Divider();
              }
            },
          ),
        ),
      ],
    );
  },
))); //Widget with "Material design"

}

小部件_buildCarousel（BuildContext context，int carouselIndex）{ 返回列（ mainAxisSize：MainAxisSize.min，儿童：[ 文字（'Carousel $ carouselIndex'）， SizedBox（ //您可能要在此处使用宽高比来支持平板电脑高度：200.0，子：PageView.builder（ //将此控制器存储在状态中以保存轮播滚动位置控制器：PageController（viewportFraction：0.8）， itemBuilder：（BuildContext上下文，int itemIndex）{ return _buildCarouselItem（context，carouselIndex，itemIndex）; }，），） ]，）; }

小部件_buildCarouselItem（ BuildContext上下文，int carouselIndex，int itemIndex）{ 返回填充（填充：EdgeInsets.symmetric（水平：4.0），子代：集装箱（装饰：BoxDecoration（颜色：Colors.grey， borderRadius：BorderRadius.all（Radius.circular（4.0）），），），）; } }

如何在行中设置多个图标并设置背景颜色，然后在下面设置抖动的滑块？

0 个答案: