简体   繁体   English

flutter:在Scaffold底部添加一个Text

[英]flutter: Add a Text at the bottom of Scaffold

I am new to flutter.我是扑的新手。 In my home screen I want to add a text at the bottom of the Screen displayed在我的主屏幕中,我想在显示的屏幕底部添加一个文本

home page code主页代码

Scaffold buildUnAuthScreen(){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Theme.of(context).accentColor,
              Theme.of(context).primaryColor,
            ]
          ),
        ),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('FriendsHive',
            style: TextStyle(
              fontFamily: 'Signatra',
              fontSize: 90.0,
              color: Colors.white,
            ) ,
            ),
            GestureDetector(
              onTap: login,
              child: Container(
                width: 260.0,
                height: 60.0,
                decoration: BoxDecoration(
                  image: DecorationImage(image: AssetImage('assets/images/google_signin_button.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

result结果

模拟器

In this screen I want to add a text that will be displayed at the bottom.在这个屏幕中,我想添加一个将显示在底部的文本。 I tried an example but when I apply that, text is shown at bottom but the main text and the button goes up, I don't want that to happen.我尝试了一个例子,但是当我应用它时,文本显示在底部,但主要文本和按钮上升,我不希望这种情况发生。

you can use this code你可以使用这个代码

 Expanded(
      child: Align(
        alignment: FractionalOffset.bottomCenter,
         child: Text('You can try'),    
      ),
    ),

or或者

 bottomNavigationBar: BottomAppBar(
color: Colors.transparent,
child: Text('something'),
elevation: 0,

), ),

you can wrap your column with stack and in stack use positioned widget like code below您可以使用堆栈包裹您的列,并在stack使用定位小部件,如下面的代码

Scaffold(
      body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [
                  Theme.of(context).accentColor,
                  Theme.of(context).primaryColor,
                ]),
          ),
          alignment: Alignment.center,
          child: Stack(
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'FriendsHive',
                    style: TextStyle(
                      fontFamily: 'Signatra',
                      fontSize: 90.0,
                      color: Colors.white,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {},
                    child: Container(
                      width: 260.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage(
                              'assets/images/google_signin_button.png'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              Positioned(
                bottom: 0,
                right: 0,
                left: 0,
                child: Center(child: Text('test')),
              )
            ],
          )),
    );

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM