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

Flutter View All Button with Background (Row)

Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Reminder',style: subtitleTextStyles),
                      Row(
                        children: [
                          Text('VIEW ALL',style: subtitleTextStyles),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              alignment: Alignment.center,
                              height: 30,
                              width: 30,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(30),
                                  color: Color(0xFF8C0C14)),
                              child: Text(
                                '03',
                                style: TextStyle(color: primaryWhite),
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),

I am unable to do as given below image Need help..
left side text with button and right side text with Round box with number with background colour only on this row..

I need Like This.. 👇👇

I Need like This...

Tags:

2

Answers


  1. 0

    It might be coming from your scaffold’s backgroundColor which is grey[50] by default. You can change it on theme level or wrap the Row with Material widget and provide the white color.

    return MaterialApp(
  theme: Theme.of(context).copyWith(
    scaffoldBackgroundColor: 
  ),

    Or

    Scaffold(
   backgroundColor: ,

    Or

    Material( 
  color:  
  chld:Row
    Login or Signup to reply.
  2. 0

    You can use ListTile to achieve this, You can check the UI output

         ListTile(
      tileColor: Colors.white,
      contentPadding: EdgeInsets.zero,
      minVerticalPadding: 0,
      dense: true,
      title: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.purple.shade400,
              borderRadius: const BorderRadius.only(
                bottomRight: Radius.circular(16),
              ),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: TextButton(
              style: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.white)),
              child: const Text('Reminders'),
              onPressed: () {},
            ),
          ),
          TextButton(
            onPressed: () {},
            child: const Text('View All'),
          ),
        ],
      ),
      trailing: CircleAvatar(
        radius: 14,
        backgroundColor: Colors.red,
        child: Text(
          '4',
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
    );

    UI Output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search