skip to Main Content

Question: No center widget is used, still the title "Daily" is the center. How?

The code provided below is the of the UI of the app as shows in the image.
CarouselSlider is used to slide horizontally.

Code:

CarouselSlider(
                items: [
                Column(
                children: [
                Container(
                child: Text("Daily", style: TextStyle(color: Colors.white, fontSize: 20)),
                ),
                Expanded(
                   child: SingleChildScrollView(
                   child: Container(
                   margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                   child: Text(data['daily'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17 )),
                                                  )),
                                              ),
                                            ],
                                          ),
                                          Column(
                                            children: [
                                              Container(
                                                child: Text("Weekly", style: TextStyle(color: Colors.white, fontSize: 20)),
                                              ),
                                              Expanded(
                                                child: SingleChildScrollView(
                                                  child: Container(
                                                    margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                                                    child: Text(data['weekly'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17 )),
                                                  )),
                                              ),
                                            ],
                                          ),
                                        ],
                                    
                                    options: CarouselOptions(
                                      
                                      height: MediaQuery.of(context).size.height-300,                                      
                                      enlargeCenterPage: true,
                                      initialPage: 0,
                                      aspectRatio: 16/9,
                                      autoPlayCurve: Curves.fastOutSlowIn,
                                      enableInfiniteScroll: false,
                                      autoPlayAnimationDuration: Duration(milliseconds: 800),
                                      viewportFraction: 1,
                                    ),
                                  );

2

Answers


  1. You can change those with columns axisAlignments

    Column(
       crossAxisAlignment : CrossAxisAlignment.start
    )
    
    Login or Signup to reply.
  2. This happened because of the default setting of Column and crossAxisAlignment which by default set to center, you can override it like this:

    Column(
        crossAxisAlignment: CrossAxisAlignment.start, // <=== add this
        children: [
          Container(
            child: Text("Daily",
                style: TextStyle(color: Colors.white, fontSize: 20)),
          ),
          ...
        ],
      ),
    

    more about crossAxisAlignment

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search