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 :
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
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), ), ), ), ], ), )
hey by using Container and Column and Row u can create this view.. no need for stack i guess below is the sample code
Container
Column
Row
need for stack
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
Click here to cancel reply.
2
Answers
hey by using
Container
andColumn
andRow
u can create this view.. noneed for stack
i guess below is the sample codeand the output sample