Flutter how to problems and solutions tips

1. Centering child to the parent container

If don't want your child container takes up all the space in your parent container or you want the child container to be in a certain position then you should wrap your child container with Center or Align widget.

Container(
                   height: 320,
                   child: PageView.builder(
                       controller: PageController(viewportFraction: 0.88),
                       itemCount: 4,
                       itemBuilder: (_, i){
                         return GestureDetector(
                           child: Align(
                             alignment: Alignment.topCenter,
                             child: Container(
                               padding: const EdgeInsets.only(left: 20, top: 20),
                               height: 220,
                               width: MediaQuery.of(context).size.width-20,
                               margin: const EdgeInsets.only(right: 10),
            
                             ),
                           ),
                         );
                       }),
                 ),

If you remove the Align widget, the child widget will take all the space. Instead of Align widget you can also wrap your child widget using Center widget to get the same result.

2. Container takes the availble space in the row

If you want your container to take all the available space in a row, wrap your container around expanded widget in side the  row. Then it will take all the available space.

Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      image: DecorationImage(
                          image: AssetImage(
                              element.toString()
                          )
                      )
                  ),
                ),
                Expanded(
                  child: Container(
                      height: 80,
                      decoration: BoxDecoration(
                        color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(20),
                            bottomRight: Radius.circular(20)
                          )
                      )
                  ),
                )
              ],
            )

You see the above code second container is wrapped around Expanded widget. And this takes the available space.

 

3. Scrollable widget inside Stack widget

In general you can not scroll inside positioned widget. So you can not scroll inside Stack widget since positioned widgets are placed inside Stack widget. 

But we can use a trick. We can use ListView.builder and put the ListView inside a container. And this container can be inside a Positioned widget.

Positioned(
     child:Container(
                            width: 350,
                            height: 300,
                            child:
                            MediaQuery.removePadding(
                              context: context,
                              removeTop: true,
                              child: ListView.builder(
                                itemCount: 1,
                                itemBuilder: (_, index){
                                  return                                       DescriptionTextWidget(text: "The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if. The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if");
                                //  DescriptionTextWidget(text: "The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if. The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if");

                                }),
                            ),
                          )

)

 

Another approach is to wrap your widget around, SingleChildScrollView and wrap SingleChildScrollView within Expanded, wrap Expanded within Column widget and wrap Column within Container. Container must have a width and height.

4. Flutter Stack and Positioned Widget Scrollable

We will learn how to make flutter stack and positioned widget scrollable. There are two ways you can flutter stack positioned widget scrollable. First one by setting left, right, top and bottom value. You can set them whatever value you want and then you will see the child widget inside it, is scrollable. The other way, you can set height to your child widget. Then it will make the positioned widget scrollable for child widget.

 

5. Flutter TextOverflow Ellipsis Does Not Work

Flutter TextOverflow solve using ellipsis for column and expanded widgets. You will learn how to show dots or ellipsis for text widget in container. Text widget could be wrapped inside column or other widget. The solution is to use wrap text widget inside row or column widget. Then wrap the row or column widget using expanded or flexible widget. If your ellipsis are not working, it means you are not wrapping it around column and expanded widget. Wrapping your text widget inside column is a must thing to do.

Recent posts