flutter - 我如何在颤振中应用这种设计

Question

我希望所有的视图都做得很好，我想用颤振应用图片中的设计，我创建了一个自定义 appBar 但我不能这样做，我尝试使用定位的小部件并且我给容器对齐但它不起作用，可以有人帮帮我吗？

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: [
            Container(
              height: 147,
              decoration: BoxDecoration(color: Theme.of(context).primaryColor),
            ),
            Container(
              alignment: Alignment(.40, -0.80),
              height: 50,
              width: 343,
              child: TextField(
                  textAlign: TextAlign.right,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white24,
                    hintText: 'Data',
                    prefixIcon: Icon(Icons.search),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20),
                      borderSide: BorderSide(width: 0, color: Colors.white12),
                    ),
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100),
                        borderSide:
                            BorderSide(width: 0, color: Colors.white12)),
                  )),
            )
          ],
        ),
      ),
    );
  }
}

标签： flutterdartflutter-layouttextfieldflutter-widget

Answer 1

使用 Stack() 和 Positioned()

return Scaffold(
  body: Container(
    height: double.infinity,
    width: double.infinity,
    child: Stack(
      children: [
        Container(
          height: 147,
          decoration: BoxDecoration(color: Theme.of(context).primaryColor),
          child: Padding(
            padding: EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.menu, color: Colors.white),
                      onPressed: () => print('Test'),
                    ),
                    SizedBox(width: 10.0),
                    Text('Data', style: TextStyle(color: Colors.white, fontSize: 20.0)),
                  ],
                ),
                Icon(Icons.bubble_chart_rounded, color: Colors.white)
              ],
            ),
          ),
        ),
        Positioned(
          top: 120,
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: Padding(
              padding: const EdgeInsets.only(right: 25, left: 25),
              child: Column(
                children: [
                  TextField(
                      textAlign: TextAlign.right,
                      decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white24,
                        hintText: 'Data',
                        prefixIcon: Icon(Icons.search),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: BorderSide(width: 0, color: Colors.white12),
                        ),
                        focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(width: 0, color: Colors.white12)),
                      )),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Text('Data'),
                      Text('Data'),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);