Skip to content

Instantly share code, notes, and snippets.

@tamoyal
Created May 30, 2020 22:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tamoyal/7c5636ce51be10fc287c4e876bca22d2 to your computer and use it in GitHub Desktop.
Save tamoyal/7c5636ce51be10fc287c4e876bca22d2 to your computer and use it in GitHub Desktop.
Audio Chat Bubble with Clip (not working)
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ChatAudioTextBubble("Test message"),
),
),
);
}
}
class ChatAudioTextBubble extends StatefulWidget {
final String text;
ChatAudioTextBubble(this.text);
@override
_ChatAudioTextBubbleState createState() => _ChatAudioTextBubbleState();
}
class _ChatAudioTextBubbleState extends State<ChatAudioTextBubble>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Widget build(BuildContext context) {
return GestureDetector(
onDoubleTap: () => print("Plays the audio and starts the animation which takes _controller.value from 0-1"),
child: Stack(children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFE6E6E6)),
)),
ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
child: Positioned.fill(
child: FractionallySizedBox(
alignment: Alignment.centerLeft,
heightFactor: 1,
widthFactor: _controller == null ? 0 : _controller.value,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.blue.withOpacity(0.3),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.zero,
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.zero,
),
),
),
))),
Container(
constraints: BoxConstraints(
minWidth: 40,
maxWidth: MediaQuery.of(context).size.width * 0.70),
child: _buildTextChild())
]));
}
Widget _buildTextChild() {
final color = Colors.black;
return Padding(
padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
child: Text(widget.text, style: TextStyle(color: color, fontSize: 18)));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment