Question 291267 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to create button like this

I want to create button like this in flutter.
Ok I know that text1 and text2 must to be in a Row().
I don’t know to to create this align to text1 must to be in center and text2 must to be align to right.

Image of what I want to create
enter image description here

My code

import 'package:flutter/material.dart';
import 'package:streeti/static/static_colors.dart';

class ButtonWithBlue extends StatelessWidget {
  const ButtonWithBlue({Key? key, required this.text1, required this.text2})
      : super(key: key);

  final String text1;
  final String text2;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
          height: 75,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white12,
            border: Border.all(
              color: AppColors.BlueColor,
              width: 1.0,
            ),
          ),
          child: RawMaterialButton(
            onPressed: () {},
            splashColor: Colors.blue,
            child: Stack(
              children: [
                Positioned(
                  right: -20,
                  top: -25,
                  height: 120,
                  width: 120,
                  child: Container(
                    decoration: ShapeDecoration(
                      color: AppColors.BlueColor,
                      shape: const CircleBorder(),
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        text1,
                        style: TextStyle(color: Colors.black, fontSize: 18),
                      ),
                      SizedBox(
                          width: 8), // Add some space between text1 and text2
                      Text(
                        text2,
                        style: TextStyle(color: Colors.black, fontSize: 18),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

How to build this button so that text1 is in the middle and text2 is on the right? (like on image)
As I wrote, I know that I should use Row() but I don’t know how to do it in this case.
SpaceBettwen + center?

Tags:

3

Answers


  1. 0

    H!, you can use Spacer()

    Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Spacer(),
                      Text(
                        text1,
                        style:
                            const TextStyle(color: Colors.black, fontSize: 18),
                      ),
                      const Spacer(),
                      const SizedBox(
                          width: 8), // Add some space between text1 and text2
                      Text(
                        text2,
                        style:
                            const TextStyle(color: Colors.black, fontSize: 18),
                      ),
                    ],
                  ),

    Also so that the blue edges do not get cut off you have to add to container that is inside ClipRRect:

    ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
          height: 75,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(
              Radius.circular(20), // <----
            ),
            color: Colors.white12,
            border: Border.all(
              color: Colors.blue,
              width: 2.0,
            ),
          ),
    ...
    Login or Signup to reply.
  2. 0

    The default mainAxisSize: MainAxisSize.max on Row, you can use

    Row(
  mainAxisSize: MainAxisSize.min,
  children: [

    Also you can just use string like Text('$text1 $text2') or Text.rich.

    Login or Signup to reply.
  3. 0

    One way is to use Stack and align Texts to center and centerRight. Something like this:

    Container(
  alignment: Alignment.center,
  child: Stack(
    children: [
      Container(
        alignment: Alignment.center,
        child: Text(
          text1,
          style: const TextStyle(
              color: Colors.black, fontSize: 18),
        ),
      ),
      Container(
        alignment: Alignment.centerRight,
        child: Text(
          text2,
          style: const TextStyle(
              color: Colors.black, fontSize: 18),
        ),
      ),
    ],
  ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search