Flutter: Inline multiple widget

Question

I am trying to show inline widgets like Circle Avatar, Text widget with some texts and icons. Below is the code I have written but when i run output is not inline.

I am expecting like this

Photo ---> Text ----> Text with Icon
      ---> More Text ---> Text

Currently, i am getting like this.

Photo
Text
Text with Icon
More Text
Text

Here is the code.

If showdata is true then it will show another set of widget and if its false then differnt set.

Widget buildList1(BuildContext context, int index) {
      return  InkWell(
        onTap: () {
          String tag = lists[index].tag ;
          print(tag);
         // navigateToFollowing(following, id, index);
        },
      child: (showdata) ?
      Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.white,
      ),
      width: double.infinity,
      height: (showdata) ? 70 : 180,
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
      child: 
       Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          
          Expanded(
            child: Column(
              
              crossAxisAlignment: CrossAxisAlignment.start,
              children:     <Widget>[

               
                
                 Text(
                        "Trending Posts ",
                        style: TextStyle(
                            color: primary, fontSize: 12, letterSpacing: .3)),

                Text(
              '#' + lists[index].tag, 
                  style: TextStyle(
                      color: primary,
                      fontWeight: FontWeight.bold,
                      fontSize: 18),
                ),
                Text(
                        lists[index].count + ", Posts ",
                        style: TextStyle(
                            color: primary, fontSize: 13, letterSpacing: .3)),
              
               ] 
            ),
          ),
        ],
      ),
      )
               : 
              child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.white,
                  ),
                  width: double.infinity,
                  height: (showdata) ? 70 : 180,
                  margin: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
               child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
          
                    Expanded(
                      child: Column(
                        
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: 
                        <Widget>[ 

                          //Posts
                                
                            Container(
                              width: 70,
                              height: 70,
                              margin: EdgeInsets.only(top:5, right: 5, bottom: 5),
                              child: CircleAvatar(
                                        radius: 50,
                                        backgroundColor: Color(0xff476cfb),
                                        child: ClipOval(
                                          child: Image.network(
                                            searchlists[index].profilePhoto, 
                                            fit: BoxFit.fill,
                                            ),
                                        ),
                              ),
                        
                            ),
                          Expanded(
                            child:
                            Column(
                              
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                              searchlists[index].name, 
                                  style: TextStyle(
                                      color: primary,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 18),
                                ),
                                SizedBox(
                                  height: 6,
                                ),
                                Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.location_on,
                                      color: secondary,
                                      size: 20,
                                    ),
                                    SizedBox(
                                      width: 5,
                                    ),
                                    Text(
                                      "Last Seen on -" + searchlists[index].lastLogin,
                                        style: TextStyle(
                                            color: primary, fontSize: 13, letterSpacing: .3)),
                                  ],
                                ), 
                                SizedBox(
                                  height: 6,
                                ),
                                Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.timer,
                                      color: secondary,
                                      size: 20,
                                    ),
                                    SizedBox(
                                      width: 5,
                                    ),
                                    
                                    Text(
                                    searchlists[index].registrationDate ,
                                    
                                        style: TextStyle(
                                            color: primary, fontSize: 13, letterSpacing: .3)),
                                  ],
                                ), 
                      
                          ],
                    
                          ),
                        ),
                      ],
               ),
            ),
        ],
          
      ),
        ), 
    );
  }

Ranjeet · Accepted Answer · 2020-06-27 09:15:05Z

2

Wrap in Row() widget

 Row(
      children: <Widget>[
        CircleAvatar(),
        Text()
        ....
      ],
    )

answered Jun 27, 2020 at 9:15

Ranjeet

5795 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roxx Over a year ago

Let me try your suggestion.

Floyd Watson · Accepted Answer · 2020-06-27 09:34:58Z

2

A simple way to get the layout of

Photo ---> Text ----> Text with Icon
      ---> More Text ---> Text

would be to wrap the widgets in multiple Row's

 Column(
   children: <Widget>[
      Row(
         children: <Widget>[
           Photo(), Text(), Text(), Icon(),
         ],
      ),
      Row(
         children: <Widget>[
            Expanded(), Text(), Text(),
          ],
       )
    ],
  ),

The Expanded will push your text to the far side of the screen.

Flex is another option you can use to be able to customize your layout a bit more. There is quite a few options available to you so i am no doubt missing some here

answered Jun 27, 2020 at 9:34

Floyd Watson

4084 silver badges11 bronze badges

3 Comments

Roxx Over a year ago

Thanks for your answer. I will give it a try.

Sandro Maglione Over a year ago

I think this approach is too restrictive when you are working with variable text. I would suggest looking into the Wrap widget.

Floyd Watson Over a year ago

Considering all elements in the initial question were given a hard set height and width the contents of said elements should be handled inside them. Also a wrap would not give you the desired layout if you overflowed it, it would instead wrap onto the next line and fill space. There is definitely better ways to make more dynamic layouts to achieve the original questions goal. However, this is very static components and a 2 year old answer

Syed Umair Shah Bukhari · Accepted Answer · 2022-12-19 13:11:13Z


Text.rich(
                                    TextSpan(
                                      text:
                                          'Lorem Ipsum is simply dummy text of the printing and typesetting',
                                      style: TextStyle(
                                        color: Colors.black,
                                      ),
                                      children: <InlineSpan>[
                                        WidgetSpan(
                                            alignment:
                                                PlaceholderAlignment.baseline,
                                            baseline: TextBaseline.alphabetic,
                                            child: ConstrainedBox(
                                              constraints: const BoxConstraints(
                                                maxWidth: 200,
                                              ),
                                              child: Padding(
                                                padding: const EdgeInsets.only(
                                                  left: 8.0,
                                                ),
                                                child: Text(
                                                  '#Friends #atWork',
                                                  style: TextStyle(
                                                    color: Colors.black,
                                                  ),
                                                ),
                                              ),
                                            )),
                                        const TextSpan(
                                          text: '.',
                                        ),
                                      ],
                                    ),
                                  ),

Collectives™ on Stack Overflow

Flutter: Inline multiple widget

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related