Styjun

Why do the Z-fighters hide their power?

Does the main washing effect of soap come from foam?

Where and when has Thucydides been studied?

Is there night in Alpha Complex?

What does Sonny Burch mean by, "S.H.I.E.L.D. and HYDRA don't even exist anymore"?

Twin's vs. Twins'

How do I say "this must not happen"?

How to make an animal which can only breed for a certain number of generations?

An isoperimetric-type inequality inside a cube

Why can't fire hurt Daenerys but it did to Jon Snow in season 1?

French equivalents of おしゃれは足元から (Every good outfit starts with the shoes)

Searching extreme points of polyhedron

Found this skink in my tomato plant bucket. Is he trapped? Or could he leave if he wanted?

Does a random sequence of vectors span a Hilbert space?

Is the Mordenkainen's Sword spell underpowered?

Should man-made satellites feature an intelligent inverted "cow catcher"?

Vertical ranges of Column Plots in 12

Flight departed from the gate 5 min before scheduled departure time. Refund options

How to get a flat-head nail out of a piece of wood?

How do Java 8 default methods hеlp with lambdas?

New Order #6: Easter Egg

By what mechanism was the 2017 UK General Election called?

How to achieve cat-like agility?

The test team as an enemy of development? And how can this be avoided?

How can i center a widget between two column children?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I have a column which contains 3 children.

How can i place a widget (red rectangle) on top of this column and center it between the second and the last child?

This is what i try to achieve:

flutter

share|improve this question

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What is the use-case? This is not something that you can naturally achieve using widgets
  
  – Rémi Rousselet
  Mar 22 at 13:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  1-3 are buttons which lead to further functions. The red rectangle widget should be shown, when the user is not logged in (=overlay for buttons 2&3). Buttons 2&3 are in disabled state, but i also need this rectangle for a message box. I have achieved it with a Stack-widget and margin-value, but i prefer a solution with "real center" between those two widgets.
  
  – Jan Möller
  Mar 22 at 14:14
  

  
  
  
  

add a comment | 

1

I have a column which contains 3 children.

How can i place a widget (red rectangle) on top of this column and center it between the second and the last child?

This is what i try to achieve:

flutter

share|improve this question

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What is the use-case? This is not something that you can naturally achieve using widgets
  
  – Rémi Rousselet
  Mar 22 at 13:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  1-3 are buttons which lead to further functions. The red rectangle widget should be shown, when the user is not logged in (=overlay for buttons 2&3). Buttons 2&3 are in disabled state, but i also need this rectangle for a message box. I have achieved it with a Stack-widget and margin-value, but i prefer a solution with "real center" between those two widgets.
  
  – Jan Möller
  Mar 22 at 14:14
  

  
  
  
  

add a comment | 

I have a column which contains 3 children.

How can i place a widget (red rectangle) on top of this column and center it between the second and the last child?

This is what i try to achieve:

flutter

share|improve this question

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

flutter

flutter

share|improve this question

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

share|improve this question

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

asked Mar 22 at 13:31

Jan MöllerJan Möller

134215

2 Answers
2

active

oldest

votes

0

You can wrap Widget 2 & 3 in a Stack, then in that Stack have a Center Widget with the Red Widget inside of it.

This would only work if 2 & 3 are the same size though...

share|improve this answer

answered Mar 22 at 17:56

01leo01leo

581115

add a comment | 

0

You can create something like this,

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("ONE"),
 ),
 Stack(
 alignment: Alignment.center,
 children: [
 Column(
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("TWO"),
 ),
 RaisedButton(
 onPressed: null,
 child: Text("THREE"),
 ),
 ],
 ),
 Align(
 alignment: Alignment.center,
 child: Container(
 color: Colors.red,
 height: 50,
 width: 50,
 ),
 )
 ],
 )
 ],
 ),

• Column
  
  
  • Button
  
  
  • Stack
  
  
  • Column
    
    
    • Button
    
    
    • Button
    
    
  
  
  • Container(Red Area) Wrapped with Align Widget and Align by the center.
  
  

share|improve this answer

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55300738%2fhow-can-i-center-a-widget-between-two-column-children%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can wrap Widget 2 & 3 in a Stack, then in that Stack have a Center Widget with the Red Widget inside of it.

This would only work if 2 & 3 are the same size though...

share|improve this answer

answered Mar 22 at 17:56

01leo01leo

581115

add a comment | 

0

You can wrap Widget 2 & 3 in a Stack, then in that Stack have a Center Widget with the Red Widget inside of it.

This would only work if 2 & 3 are the same size though...

share|improve this answer

answered Mar 22 at 17:56

01leo01leo

581115

add a comment | 

You can wrap Widget 2 & 3 in a Stack, then in that Stack have a Center Widget with the Red Widget inside of it.

This would only work if 2 & 3 are the same size though...

share|improve this answer

answered Mar 22 at 17:56

01leo01leo

581115

share|improve this answer

answered Mar 22 at 17:56

01leo01leo

581115

answered Mar 22 at 17:56

01leo01leo

581115

answered Mar 22 at 17:56

01leo01leo

581115

0

You can create something like this,

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("ONE"),
 ),
 Stack(
 alignment: Alignment.center,
 children: [
 Column(
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("TWO"),
 ),
 RaisedButton(
 onPressed: null,
 child: Text("THREE"),
 ),
 ],
 ),
 Align(
 alignment: Alignment.center,
 child: Container(
 color: Colors.red,
 height: 50,
 width: 50,
 ),
 )
 ],
 )
 ],
 ),

• Column
  
  
  • Button
  
  
  • Stack
  
  
  • Column
    
    
    • Button
    
    
    • Button
    
    
  
  
  • Container(Red Area) Wrapped with Align Widget and Align by the center.
  
  

share|improve this answer

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318

add a comment | 

0

You can create something like this,

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("ONE"),
 ),
 Stack(
 alignment: Alignment.center,
 children: [
 Column(
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("TWO"),
 ),
 RaisedButton(
 onPressed: null,
 child: Text("THREE"),
 ),
 ],
 ),
 Align(
 alignment: Alignment.center,
 child: Container(
 color: Colors.red,
 height: 50,
 width: 50,
 ),
 )
 ],
 )
 ],
 ),

• Column
  
  
  • Button
  
  
  • Stack
  
  
  • Column
    
    
    • Button
    
    
    • Button
    
    
  
  
  • Container(Red Area) Wrapped with Align Widget and Align by the center.
  
  

share|improve this answer

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318

add a comment | 

You can create something like this,

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("ONE"),
 ),
 Stack(
 alignment: Alignment.center,
 children: [
 Column(
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("TWO"),
 ),
 RaisedButton(
 onPressed: null,
 child: Text("THREE"),
 ),
 ],
 ),
 Align(
 alignment: Alignment.center,
 child: Container(
 color: Colors.red,
 height: 50,
 width: 50,
 ),
 )
 ],
 )
 ],
 ),

• Column
  
  
  • Button
  
  
  • Stack
  
  
  • Column
    
    
    • Button
    
    
    • Button
    
    
  
  
  • Container(Red Area) Wrapped with Align Widget and Align by the center.
  
  

share|improve this answer

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("ONE"),
 ),
 Stack(
 alignment: Alignment.center,
 children: [
 Column(
 children: <Widget>[
 RaisedButton(
 onPressed: null,
 child: Text("TWO"),
 ),
 RaisedButton(
 onPressed: null,
 child: Text("THREE"),
 ),
 ],
 ),
 Align(
 alignment: Alignment.center,
 child: Container(
 color: Colors.red,
 height: 50,
 width: 50,
 ),
 )
 ],
 )
 ],
 ),

share|improve this answer

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318

answered Mar 22 at 18:11

ibhavikmakwanaibhavikmakwana

6811318