Home > Mobile >  Align text vertically flutter
Align text vertically flutter

Time:03-25

I think the best way to explain my issue is with images, so this is what I want to achieve, dont mind the styling of either image.

aligned text

But when I try to implement it myself, the bottom text gets indented.

my result

Here are my code. Note I am new to flutter, so tips are also appreciated.

SizedBox(
            width: 580,
            height: 95,
            child: Material(
              color: panelBackground,
              borderRadius: BorderRadius.circular(5),
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 25),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        const Text(
                          "Project Name",
                          style: TextStyle(
                            fontSize: 36,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 5),
                        RichText(
                            text: const TextSpan(
                                text: "Made by: ",
                                style: TextStyle(
                                  fontSize: 14,
                                  color: Color(0xFF838383),
                                ),
                                children: [
                              TextSpan(
                                  text: '/',
                                  style: TextStyle(
                                      color: Colors.amber,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(
                                  text: '6u5t4v',
                                  style: TextStyle(
                                      color: Colors.amberAccent,
                                      letterSpacing: 2,
                                      fontWeight: FontWeight.bold,
                                      fontStyle: FontStyle.italic))
                            ])),
                      ],
                    ),
                    Column(
                      children: [Text("rating here")],
                    ),
                    const SidebarIcon(
                      icon: Icon(Icons.save),
                    )
                  ],
                ),
              ),
            ),
          ),

CodePudding user response:

Just set crossAxisAlignment to start

Column(
     crossAxisAlignment: CrossAxisAlignment.start,
         children: [
            const Text(
               "Project Name",
               style: TextStyle(
               fontSize: 36,
               color: Colors.white,
               fontWeight: FontWeight.w600,
            ),
            ),
  • Related