GotJimmy / accordion

Other
46 stars 43 forks source link

How align content in left? #58

Closed Anderson-Andre-P closed 10 months ago

Anderson-Andre-P commented 10 months ago

How do I make the content align to the left corner? At the moment it is centralized and I can't change it...

Code:

Accordion(
                                  headerPadding: const EdgeInsets.symmetric(
                                    vertical: 8,
                                    horizontal: 16,
                                  ),
                                  children: [
                                    AccordionSection(
                                      isOpen: true,
                                      contentVerticalPadding: 16.0,
                                      contentHorizontalPadding: 0,
                                      header: const Text(
                                        'Sensors',
                                      ),
                                      content: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          if (assetsSensors != null)
                                            for (final sensors in assetsSensors)
                                              RichText(
                                                text: TextSpan(
                                                  text: '• ',
                                                  style: const TextStyle(
                                                      color: Colors.lightBlue,
                                                      fontSize: 18),
                                                  children: <TextSpan>[
                                                    TextSpan(
                                                      text: '${assets.sensors}',
                                                    ),
                                                  ],
                                                ),
                                              ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),

Demo: image

Anderson-Andre-P commented 10 months ago

I wrapped TextRich in a row and added mainAxisAlignment: MainAxisAlignment.start and aligned it as I wanted.

I'll be closing this issue for that reason, but I don't know if this was a problem with my code or the package itself...

GotJimmy commented 10 months ago

Wrap the column in a container with an alignment:

            AccordionSection(
              isOpen: true,
              contentVerticalPadding: 20,
              leftIcon:
                  const Icon(Icons.text_fields_rounded, color: Colors.white),
              header: const Text('Test ...', style: headerStyle),
              content: Container(
                alignment: Alignment.centerLeft,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    RichText(
                      text: const TextSpan(
                        text: '• ',
                        style: TextStyle(color: Colors.lightBlue, fontSize: 18),
                        children: <TextSpan>[
                          TextSpan(
                            text: 'assets sensors',
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),