CODEWITHSUNDEEP
flutterflutter-layout
Midhilaj
Midhilaj

Reputation: 4987

How to get parent Widget width

I have a card view Widget and inside that a Text Widget but it is showing overflowed by 1.00pixels
Is there any way to set Text fit to parent width 

Container(
            child: Card(
              margin: EdgeInsets.only(left: 10, right: 10),
              child: Column(
                children: getDetailsItems(),
              ),
            ),
          ),


Here getDetailsItems return a list of Widget it include Text Widget

List<Widget> getDetailsItems() {
    List<Widget> l = [];

    if (mItem.mServiceDetail != null) {
      for (int i = 0; i < mItem.mServiceDetail.length; i++) {
        Row r1 = Row(
          children: <Widget>[],
        );
        Align a1 = Align(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Container(
                child: SizedBox(
              width: 24,
              height: 24,
              child: Image.network(mItem.mServiceDetail[i].img),
            )),
          ),
          alignment: Alignment.centerLeft,
        );
        Align a2 = Align(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Container(

                child: Align(
              child:  Text(
                (mItem.mServiceDetail[i].title == null
                    ? ""
                    : mItem.mServiceDetail[i].title),
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
              ),
            )),
          ),
          alignment: Alignment.topRight,
        );

        r1.children.add((a1));
        r1.children.add((a2));

        l.add(r1);
      }
    }

    return l;
  }

enter image description here


It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.

Upvotes: 0

Views: 2271

Answers (1)

kounex
kounex

Reputation: 1715

As a direct child of your Row you can wrap your Align widget with a Flexible widget. This will prevent its child from overflowing. Note that this can only be used for direct children of RenderFlex widget as Column or Row. So in your case:

Flexible a2 = Flexible(
  child: Align(
    child: Padding(
      padding: EdgeInsets.all(10),
      child: Container(
        child: Align(
          child: Text(
            mItem.mServiceDetail[i].title == null
                ? ""
                : mItem.mServiceDetail[i].title,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
          ),
        ),
      ),
    ),
    alignment: Alignment.topRight,
  ),
);

I have added the overflow: TextOverflow.ellipsis property to make it visible.

As a general tip I would recommend you to add children of something like Row directly and skip using those local variables as most stuff in Flutter is added instantly as part of its declarative form. So your method should look like this:

List<Widget> getDetailsItems() {
  List<Widget> l = [];

  if (mItem.mServiceDetail != null) {
    for (int i = 0; i < mItem.mServiceDetail.length; i++) {
      l.add(
        Row(
          children: <Widget>[
            Align(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Container(
                  child: SizedBox(
                    width: 24,
                    height: 24,
                    child: Image.network(mItem.mServiceDetail[i].img),
                  ),
                ),
              ),
              alignment: Alignment.centerLeft,
            ),
            Flexible(
              child: Align(
                alignment: Alignment.topRight,
                child: Padding(
                  padding: EdgeInsets.all(10),
                  child: Container(
                    child: Align(
                      child: Text(
                        mItem.mServiceDetail[i].title == null
                            ? ""
                            : mItem.mServiceDetail[i].title,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontWeight: FontWeight.w500, fontSize: 16),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  return l;
}

Seeing you use this function to create those entries in a specific way is also a good indicator that it should be a Widget itself so you could even create a new StatefulWidget for that.

Upvotes: 1

Related Questions