How to create this type of dialog in flutter

Question

I am creating a story app where two users telling the story like this in the below images. so here I want to create a dialog box like the below image. but I don't know how to create

Answer 1

You should be implement below way

class IntroPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _IntroPageState();
}

class _IntroPageState extends State<IntroPage>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  bool _menuShown = false;

  @override
  void initState() {
    animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Animation opacityAnimation =
        Tween(begin: 0.0, end: 1.0).animate(animationController);
    if (_menuShown)
      animationController.forward();
    else
      animationController.reverse();
    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Positioned(
            right: 0,
            top:90,
            child: InkWell(
              onTap: () {
                setState(() {
                  _menuShown = !_menuShown;
                });
              },
              child: Image.asset(
                'assets/images/girls.png',
                height: 250,
              ),
            ),
          ),
          Positioned(
            child: FadeTransition(
              opacity: opacityAnimation,
              child: _DialogUI(),
            ),
            right: 40.0,
            top: 300.0,
          ),
        ],
      ),
    );
  }
}

class _DialogUI extends StatelessWidget {
  _DialogUI();

  final double padding = 8.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
          clipBehavior: Clip.antiAlias,
          shape: _DialogShapeBorder(
              borderRadius: BorderRadius.all(Radius.circular(padding)),
              padding: padding),
          elevation: 4.0,
          child: Container(
            margin: const EdgeInsets.all(10),
            padding: EdgeInsets.all(padding).copyWith(bottom: padding * 2),
            child: Center(
              child: Text(
                  'Filler text is text that shares \nsome characteristics of a real written text, \n but is random or otherwise generated.\n It may be used to display a sample of fonts,\n generate text for testing, or to spoof an e-mail spam filter.'),
            ),
          )),
    );
  }
}

class _DialogShapeBorder extends RoundedRectangleBorder {
  _DialogShapeBorder({
    @required this.padding,
    side = BorderSide.none,
    borderRadius = BorderRadius.zero,
  }) : super(side: side, borderRadius: borderRadius);
  final double padding;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {

    return Path()
      ..moveTo(rect.width - 18.0, rect.top)
      ..lineTo(rect.width - 20.0, rect.top - 36.0)
      ..lineTo(rect.width - 52.0, rect.top)
      ..addRRect(borderRadius.resolve(textDirection).toRRect(Rect.fromLTWH(
          rect.left, rect.top, rect.width, rect.height - padding)));
  }
}

Output