Question

一旦字符串到达堆叠的圆形头像，我就会尝试打破文本并创建一个新行。我不希望文本在整个高度上有一个永久的填充。

我的期望是，如果有空间的话，字符串会圈住文本。如果他在圆形头像下，则在所有文本行的相同填充处中断。

这是我的代码：

import 'dart:developer';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// import 'package:roi_concierge_mobile/account/notifications/notifications_page_view.dart';
import '../../app_theme.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

class NotificationBubble extends StatefulWidget {
  final dynamic dataList;
  NotificationBubble({Key key, this.dataList}) : super(key: key);

  @override
  _NotificationBubbleState createState() => _NotificationBubbleState();
}

class _NotificationBubbleState extends State<NotificationBubble>
    with TickerProviderStateMixin {
  String title;
  String body;
  bool seen;
  String senderImgPath;
  String typeOfReward;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    seen = widget.dataList['seen'];
    body = widget.dataList['message']['body'];
    title = widget.dataList['message']['title'];
    // senderImgPath = widget.dataList['senderImgPath'];
    senderImgPath = 'assets/campaign-images/campaign-default-3.jpg';
  }

  bool bubbleOpen = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          bubbleOpen = !bubbleOpen;
        });
      },
      child: Stack(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(
                horizontal: MediaQuery.of(context).size.width * 0.05,
                vertical: MediaQuery.of(context).size.width * 0.03),
            child: Container(
              width: MediaQuery.of(context).size.width * 1,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.3),
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(15),
                    bottomRight: Radius.circular(15),
                    topLeft: Radius.circular(15)),
                border: Border.all(
                  color: Colors.white,
                  style: BorderStyle.solid,
                  width: 1.0,
                ),
              ),
              child: AnimatedSize(
                vsync: this,
                duration: Duration(milliseconds: 200),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.dataList['message']['title'],
                      style: AppTheme.campaignCardSubTitleTextStyle
                          .copyWith(fontSize: 18.0),
                    ),
                    if (bubbleOpen) SizedBox(height: 10),
                    if (bubbleOpen)
                      Text(
                        widget.dataList['message']['body'],
                        style: AppTheme.campaignCardSubTitleTextStyle
                            .copyWith(fontSize: 18.0),
                      ),
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            right: 5.0,
            top: 0.0,
            child: Container(
              width: MediaQuery.of(context).size.width * 0.15,
              height: MediaQuery.of(context).size.width * 0.15,
              decoration: ShapeDecoration(
                  shape: CircleBorder(), color: Colors.transparent),
              child: DecoratedBox(
                decoration: ShapeDecoration(
                  shape: CircleBorder(),
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage(
                      'assets/campaign-images/campaign-default-3.jpg',
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter - 按顶级元素在堆栈小部件中分隔文本行

0 个答案: