Coder Social home page Coder Social logo

Feature request: Date and/or Time about bubble HOT 2 OPEN

s3ppo avatar s3ppo commented on July 24, 2024 2
Feature request: Date and/or Time

from bubble.

Comments (2)

rafaelsetragni avatar rafaelsetragni commented on July 24, 2024

Try this one!

  return ListView.builder(
      reverse: true,
      padding: const EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 10),
      itemCount: history!.messages.length,
      itemBuilder:  (context, index) {

        Message message = history!.messages[index];
        bool sent = widget.me == message.user;
        DateTime date = message.timestamp!.toLocal();
        int msgLength = message.msg.length;
        int limit = 35;

        return Bubble(
          style: sent ? styleMe : styleSomebody,
          child: Container(
            constraints: BoxConstraints(
                maxWidth: mediaQueryData.size.width * 0.7,
            ),
            child: Stack(
              children: [
                Padding(
                  padding: EdgeInsets.only(bottom: msgLength <= limit ? 0 : 18),
                  child: Text(
                      message.msg + (msgLength <= limit ? '             ' : ''),
                      style: DefaultTextStyle.of(context).style
                  ),
                ),
                Positioned(
                  bottom: 0,
                  right: 0,
                  child: Text(
                    dateFormatToday.format(date),
                    textAlign: TextAlign.end,
                    style: DefaultTextStyle.of(context).style.copyWith(fontSize: 12, color: Colors.grey.shade400)
                  ),
                )
              ],
            ),
          ),
        );
      }
  );

from bubble.

s3ppo avatar s3ppo commented on July 24, 2024

hi @rafaelsetragni thanks for your example code it is working great, but i am also using images inside.
it seems if there is a image .. the stack widget shows text under the image :(

here is my code:

Bubble(
  margin: BubbleEdges.only(top: 5, bottom: 5, left: 30),
  alignment: Alignment.topRight,
  nipWidth: 8,
  nipHeight: 10,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Container(
                                  constraints:
                                      BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
                                  child: Stack(
                                    children: [
                                      if (message.image != null && message.image != '') ...[
                                        showMessageImage(message.image, message.iId.oid)
                                      ],
                                      if (message.message != null && message.message != '') ...[
                                        Padding(
                                          padding:
                                              EdgeInsets.only(bottom: msgLength <= limit ? 0 : 18),
                                          child: Linkify(
                                              style: DefaultTextStyle.of(context).style,
                                              onOpen: _onOpen,
                                              text: message.message +
                                                  (msgLength <= limit ? '           ' : ''),
                                              textAlign: TextAlign.right),
                                        ),
                                      ],
                                      Positioned(
                                          bottom: -0.5,
                                          right: 0,
                                          child: Container(
                                            padding: EdgeInsets.only(right: 3),
                                            child: Text(
                                                DateFormat('HH:mm').format(
                                                    DateTime.fromMillisecondsSinceEpoch(
                                                        message.timestamp.date)),
                                                textAlign: TextAlign.end,
                                                style: DefaultTextStyle.of(context).style.copyWith(
                                                    fontSize: 12, color: Colors.grey.shade400)),
                                          ))
                                    ],
                                  ),

from bubble.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.