Question

我需要实现两个按钮。需要部分放置在另一个按钮上。因此，当按钮更改后，内容也会更改。我坚持放置这些按钮。救救我！

这是我到目前为止所做的。

 Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              height: 50,
              width: 75,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color.fromRGBO(250, 250, 250, 1),
                      Color.fromRGBO(250, 250, 250, 1)
                    ],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(50)),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey,
                        blurRadius: 20.0,
                        // spreadRadius: 5.0,
                        offset: Offset(0, 10.0))
                  ]),
              child: Center(
                child: Text(
                  'Posts',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold,fontFamily: 'Montserrat'),
                ),
              ),
            ),
            Container(
              height: 50,
              width: 95,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFf45d27), Color(0xFFf5851f)],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(50))),
              child: Center(
                child: Text(
                  'Events',
                  style: TextStyle(
                      color: Colors.white, fontFamily: 'Montserrat',fontWeight: FontWeight.bold),
                ),
              ),
            )
          ],
        ),
      ),

我希望输出像这样。

Answer 1

也许您可以尝试这样？复制粘贴到dartpad中以查看结果

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: Center(
        child: Container(
          height: 50,
          width: 200,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Color.fromRGBO(250, 250, 250, 1),
                  Color.fromRGBO(250, 250, 250, 1)
                ],
              ),
              borderRadius: BorderRadius.all(Radius.circular(50)),
              boxShadow: [
                BoxShadow(
                    color: Colors.grey,
                    blurRadius: 20.0,
                    // spreadRadius: 5.0,
                    offset: Offset(0, 10.0))
              ]),
          child: Stack(
            //change this to move position
            alignment: Alignment.center,
            children: <Widget>[
              Container(),
              Row(
                //change this to move position
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  //right container
                  Container(
                    height: 50,
                    width: 100,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Color(0xFFf45d27), Color(0xFFf5851f)],
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(50))),
                    child: Center(
                      child: Text(
                        'Events',
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: 'Montserrat',
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  //left container
                  Container(
                    height: 50,
                    width: 100,
                    child: Center(
                      child: Text(
                        'Events',
                        style: TextStyle(
                            color: Colors.black,
                            fontFamily: 'Montserrat',
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

但是Shekar的答案也可以

Answer 2

您可以使用Stack。

类似的东西

Center(
        child: Container(
          height:30,
          width:50,
          child:Stack(
          alignment:Alignment.centerLeft,
        children:<Widget>[
        //the bottom widget
          Align(alignment:Alignment.centerRight,child: 
          Container(width:50,color:Colors.red),),
          //the top widget
           Align(alignment:Alignment.centerLeft,child: Container(width:30,color:Colors.black.withOpacity(.5)),),
        ]),),
      ),

Answer 3

int viewChoice = 0; /*This is the selection of button to maintain design of button*/

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text(
            'Toolbar Title',
            style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold /*fontSize,etc*/),
          ),
          actions: [
            IconButton(
                icon: Icon(Icons.account_circle),
                onPressed: () {
                  //Todo when pressed
                }),
          ]),
      body: Container(
        padding:EdgeInsets.only(top:20),
        child: Container(
          height:50.0,
                  margin: EdgeInsets.only(left: 25.0, right: 25.0),
                  alignment: Alignment.topCenter,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(14.0),
                      border: Border.all(color: Colors.black, width: 1.0)),
                  child: Row(mainAxisSize: MainAxisSize.min, children: [
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: viewChoice == 0
                              ? LinearGradient(
                                  colors: [Colors.blueAccent, Colors.blue],
                                )
                              : null,
                          borderRadius: BorderRadius.circular(13.0),
                          border: viewChoice == 0
                              ? Border.all(color: Colors.black, width: 1.0)
                              : null,
                        ),
                        child: FlatButton(
                          color: Colors.transparent,
                          onPressed: () {
                            setState(() {
                              viewChoice = 0;
                            });
                          },
                          child: Text(
                            'Button 1',
                            /*style as your requirement*/
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: viewChoice == 1
                              ? LinearGradient(
                                  colors: [Colors.blueAccent, Colors.blue],
                                )
                              : null,
                          borderRadius: BorderRadius.circular(13.0),
                          border: viewChoice == 1
                              ? Border.all(color: Colors.black, width: 1.0)
                              : null,
                        ),
                        child: FlatButton(
                          onPressed: () {
                            setState(() {
                              viewChoice = 1;
                            });
                          },
                          child: Text(
                            'Button 2',
                            /*style as your requirement*/
                          ),
                        ),
                      ),
                    ),
                  ]),
                ),
        )
    );
  }

我想把一部分容器放在另一个

3 个答案: