skip to Main Content

i want to design card or container like below image, how i can design this type lay out of card or container any one idea :
enter image description here

I’m trying to design a upcoming ride view , and am wondering how to add the black color at the left and end of this card widget where

2

Answers


  1.          Material(
                      elevation: 3.0,
                      borderRadius: BorderRadius.circular(10),
                      child: Stack(
                        children: [
                          Container(
                            height: 250,
                            width: MediaQuery.of(context).size.width,
                            decoration: BoxDecoration(
                              color: Colors.black,
                              borderRadius: BorderRadius.circular(10),
                            ),
                          ),
                          Container(
                            height: 215,
                            width: MediaQuery.of(context).size.width,
                            margin: const EdgeInsets.only(left: 10),
                            decoration: const BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                topRight: Radius.circular(10),
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
    

    demo

    Login or Signup to reply.
  2. hey by using Container and Column and Row u can create this view.. no need for stack i guess below is the sample code

    import 'package:flutter/material.dart';
    
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(
            scaffoldBackgroundColor: Colors.black,
          ),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: Colors.black,
              title: Text(
                "Upcoming Rides",
                style: TextStyle(color: Colors.white),
              ),
            ),
            body: Padding(
              padding: const EdgeInsets.all(16.0),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    for (var i = 0; i < 5; i++)
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(
                              5,
                            ),
                            boxShadow: [
                              BoxShadow(
                                offset: Offset(1, 1),
                                spreadRadius: .5,
                                color: Colors.black.withOpacity(
                                  .4,
                                ),
                                blurRadius: 5.0,
                              ),
                            ],
                            color: Colors.black,
                          ),
                          child: Column(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(left: 8.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                      topRight: Radius.circular(5),
                                    ),
                                  ),
                                  height: 150,
                                  width: MediaQuery.of(context).size.width,
                                  child: Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Column(
                                      children: [
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              "Raid Details",
                                              style: TextStyle(color: Colors.black),
                                            ),
                                            Icon(
                                              Icons.edit_calendar_outlined,
                                              color: Colors.black,
                                            )
                                          ],
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              "11:30 am | 12 June 2023",
                                              style: TextStyle(
                                                  color:
                                                      Colors.black.withOpacity(.5)),
                                            ),
                                            Text(
                                              "Raid Details",
                                              style: TextStyle(color: Colors.blue),
                                            ),
                                          ],
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              Container(
                                height: 50,
                                child: Center(
                                  child: Text(
                                    "Cancel",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    

    and the output sample
    output

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search