CODEWITHSUNDEEP
flutterdartflutter-layout
khaldoun badreah
khaldoun badreah

Reputation: 75

how can I make this stack widget in flutter?

I'm working on an application, and I need to know how to make this widget,

widget

I need to put a container over the image I try to use stack widget but I have some bugs can you help?

Upvotes: 2

Views: 2077

Answers (3)

Manishyadav
Manishyadav

Reputation: 1746

You can use stack for overlapping each other and than inside that stack you can use DraggableScrollableSheet class for that scrollable white card .

Stack(
        fit: StackFit.expand,
        children: [
          Container(
               Image(),
          ),
           DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController){
                 return Container(),
              
                }
              ),
            
          ),
        ],
      ),

Here is the link for more Here

Upvotes: 4

Sinan Ammar
Sinan Ammar

Reputation: 68

by default stack widget childs are positioned on the top left corner of the screen. first child is on the bottom of the stack and anything comes after it is going to be above it. the solution is simple use Positioned widget to position the stack child widgets anywhere you want on the screen. this code should do the trick for you. I dont know if its the best approach for your case but it works

Stack(
        fit: StackFit.expand,
        children: [
          Container(
            width: double.infinity,
            height: 220,
            color: Colors.indigo,
            child: const Text(
              'consider this is an Image',
              textAlign: TextAlign.center,
            ),
          ),
          Positioned(
            top: 180,
            width: 395,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(32),
                  topLeft: Radius.circular(32),
                ),
              ),
              height: 600,
              width: 395,
              child: Column(
                children: const [
                  // ** Your child widgets**
                ],
              ),
            ),
          ),
        ],
      ),

Upvotes: 2

thenish
thenish

Reputation: 77

You can try something like this

Stack(
      children: <Widget>[
        Container(
          child: Image.asset(url),
          ),
        ),
        Container(
          child: Text('Show text here')
        ),
]),

Upvotes: -2

Related Questions