CODEWITHSUNDEEP
flutter
redbnlrg
redbnlrg

Reputation: 277

How to put an icon straddles two widget in flutter?

I would like to put an icon (blank square) between two Expanded (flex = 1 and flex = 10) like the following picture. I don't know how to do that, I can put it either in the left Expanded (grey) or in the right Expanded but not between them. Any idea please ?

Thank you in advance.

enter image description here

Upvotes: 0

Views: 231

Answers (1)

Aman Malhotra
Aman Malhotra

Reputation: 3196

This is where you need Stack to place one widget on top of another

Go to DARTPAD paste the below code and see it working

Use this

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Center(
            child: Stack(alignment: Alignment.center, children: [
      Row(children: [
        Expanded(
          flex: 1,
          child: Container(height: 50.0, color: Colors.grey),
        ),
        Expanded(
          flex: 10,
          child: Container(height: 50.0, color: Colors.black),
        )
      ]),
      Row(children: [
        Expanded(
          flex: 2,
          child: Icon(Icons.stop, color: Colors.red),
        ),
        Expanded(flex: 9, child: Container()),
      ])
    ])));
  }
}

Upvotes: 1

Related Questions