Flutter: 为图片添加说明信息

实现效果

如下:

See the Pen
图片上添加说明文字
by pruidong (@pruidong)
on CodePen.

image-3209

实现

在Container布局中,将图片放在BoxDecoration中.这样图片自然就在底层了.之后在Positioned中进行描述信息的处理,样式,位置这些都可以完全自定义.


import 'package:flutter/material.dart';



/// 在图片上添加说明文字.
/// 在图片上使用浅黑色背景,添加说明文字.
///
///
/// prd
/// 2020-07-26


void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
            padding: EdgeInsets.all(2.0),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage( 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',),
                fit: BoxFit.cover,
              ),
            ),
            child: Stack(
              children: [
                Positioned(
                  left: 2.0,
                  right: 2.0,
                  bottom: 2.0,
                  height: 70.0,
                  child: SingleChildScrollView(
                    child:Container(
                    padding: EdgeInsets.all(5.0),
                    decoration: BoxDecoration(
                        color: Colors.black45,
                        borderRadius: BorderRadius.all(Radius.circular(5.0))),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "这是一段说明文字",
                          style: TextStyle(color: Colors.white,fontSize:22.0,),
                        ),
                        Text(
                          "可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字.",
                          style: TextStyle(color: Colors.white),
                        )
                      ],
                    ),
                  ),
                  )
                ),
              ],
            ),
          ),
    );
  }
}