User interface 使用颤振/省道构建自定义卡

我正在尝试使用Dart/Flatter小部件构建自定义卡，下面是小部件的外壳，我在使用Dart定位元素时遇到了问题

卡片的宽度是用来测量整个屏幕的宽度，能够在两个卡片之间水平滚动，标题和内容使用JSON动态加载

Q:我目前正忙于构建这个特定的UI，如何从下面提供的代码开始？

这就是我所做的：

class BottomCards extends StatefulWidget {
  final String cardTitle;
  final String cardContent;
  BottomCards(this.cardTitle, this.cardContent);
  @override 
  _BottomCardsState createState() => _BottomCardsState();
}

class _BottomCardsState extends State<BottomCards>{
@override
Widget build(BuildContext context) {
  return Center(
    child: Card(
      child: InkWell(
        splashColor: Colors.blue.withAlpha(30),
        onTap: () {},
        child: Container(
          child: Padding( 
            padding: EdgeInsets.all(12.0),
            child: Row(
              children: <Widget>[
                Text(widget.cardTitle),
                Spacer(),
                new ButtonBar(
                  children: <Widget>[
                    new IconButton(
                      icon: Icon(CardsIcons.arrows_ccw),
                      //onPressed: REFRESH,
                    ),
                    new IconButton(
                      icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
                      //onPressed: BOOKMARK,
                    ),
                    new IconButton(
                      icon: Icon(CardsIcons.content_copy),
                      //onPressed: COPY,
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    ),
  );
 }
}

class BottomCards扩展了StatefulWidget{
最终字符串卡片标题；
最终字符串内容；
底部卡片（this.cardTitle、this.cardContent）；
@凌驾
_BottomCardsState createState（）=>\u BottomCardsState（）；
}
类_BottomCardsState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回中心(
孩子：卡片(
孩子：InkWell(
飞溅颜色：颜色。蓝色。带有alpha（30），
onTap:（）{}，
子：容器(
儿童：填充（
填充：所有边缘设置（12.0），
孩子：排(
儿童：[
文本（widget.cardTitle），
垫片（），
新钮扣杆(
儿童：[
新图标按钮(
图标：图标（CardsIcons.arrows_ccw），
//按：刷新，
),
新图标按钮(
图标：图标（CardsIcons.heart\u空，颜色：Colors.redAccent，），
//按下：书签，
),
新图标按钮(
图标：图标（CardsIcons.content\u copy），
//按：复制，
),
],
)
],
),
),
),
),
),
);
}
}

这是所需的输出

---

设置卡的高度和宽度，您就可以开始了

将高度设置为所需高度

当您想让您的卡读取屏幕宽度时，使用

MediaQuery

获取屏幕宽度。像

width: MediaQuery.of(context).size.width