huixiang_app/lib/view_widget/hot_item.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/view_widget/icon_text.dart';

class HotArticleItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.of(context).pushNamed('/router/video_playback_page');
      },
        child: hotItem(),
    );
  }

  Widget hotItem() {
    return Container(
        padding: EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withAlpha(12),
              offset: Offset(0, 3),
              blurRadius: 14,
              spreadRadius: 0,
            )
          ],
          borderRadius: BorderRadius.circular(4),
        ),
        child: Row(
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                AspectRatio(
                  aspectRatio: 1,
                  child: ClipRRect(
                    child: Image.network(
                      "https://t7.baidu.com/it/u=2675747560,2138287772&fm=193&f=GIF",
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                Icon(Icons.play_circle_outline, size: 24, color: Colors.white,),
              ],
            ),
            SizedBox(
              width: 12,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "牡丹花的养护知识牡丹花的养…",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 14.sp,
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    "首先，牡丹种植的最佳时间通常是9月下旬至10月上旬，所以人们希望在首先，牡丹种植的最佳时间通常是9月下旬…",
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: Color(0xFF353535),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      IconText(
                        "2020.01.03",
                        textStyle: TextStyle(
                          fontSize: 10.sp,
                          color: Color(0xFFB2B2B2),
                        ),
                        leftIcon: Icons.access_time_rounded,
                        iconSize: 10,
                        iconColor: Color(0xFFB2B2B2),
                      ),
                      Text(
                        "作者:百花谷",
                        style: TextStyle(
                          fontSize: 10.sp,
                          color: Color(0xFFB2B2B2),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
    );

  }
}