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

Flutter – How to add button to side of container

I am creating UI of account page with order list. I need to add arrow button to right side of basket widget. I created column with 3 rows, but i don’t know how to add arrow button to right side.

enter image description here

class BasketItem extends StatelessWidget {
  const BasketItem({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
      height: 95,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10)
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('#462', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
              Text('Processing', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
            ],
          ),
          SizedBox(height: 15),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('299.99', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700], fontSize: 18),),
              Text('2023-09-21', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
            ],
          ),
          SizedBox(height: 5),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('1 item', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
              Text('09:31 PM', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
            ],
          ),
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    Wrap your Column with Row and expand the Column with Expanded

    Complete Code : –

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const BasketItem(),
    );
  }
}

class BasketItem extends StatelessWidget {
  const BasketItem({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(10),
          margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(10)),
          height: 95,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '#462',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700]),
                        ),
                        Text(
                          'Processing',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700]),
                        ),
                      ],
                    ),
                    const SizedBox(height: 15),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '299.99',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700],
                              fontSize: 18),
                        ),
                        Text(
                          '2023-09-21',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700]),
                        ),
                      ],
                    ),
                    const SizedBox(height: 5),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '1 item',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700]),
                        ),
                        Text(
                          '09:31 PM',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700]),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 15),
              const Icon(Icons.arrow_right_sharp)
            ],
          ),
        ),
      ),
    );
  }
}

    Output : –

    enter image description here

    Login or Signup to reply.
  2. 0

    Output is here
    You can try card and columns for this example. This is the basic way, you can try learnin some another ways. You can change font sizes and spacing between columns.

    Card(
                  color: Colors.teal,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                       Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("#462"),
                    SizedBox(height: MediaQuery.of(context).size.height * 0.01),
                    Text("2392"),
                    SizedBox(height: MediaQuery.of(context).size.height * 0.01),
                    Text("1 items"),
                  ],
                ),
                SizedBox(width: MediaQuery.of(context).size.width * 0.3),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("Processing"),
                    SizedBox(height: MediaQuery.of(context).size.height * 0.01),
                    Text("2020-05-19"),
                    SizedBox(height: MediaQuery.of(context).size.height * 0.01),
                    Text("9:34 PM"),
                  ],
                ),
                        Icon(Icons.arrow_forward),
                      ],
                    ),
                  ),
                ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search