我如何在 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)),
                  )),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

尝试使用 Stack() 和 Positioned() - 对齐堆栈中的容器

https://api.flutter.dev/flutter/widgets/Stack-class.html

Answer 2

使用 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'),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

Answer 3

朋友，举个例子。

只为您更改图标

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

 
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
} 
 
class MyApp extends StatelessWidget {

  final _primaryColor = Color(0xff1877F2);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Data'),
          centerTitle: true,
          leading: IconButton(
            icon: Icon(Icons.menu), 
            onPressed: (){}
          ),
          elevation: 0,
          backgroundColor: _primaryColor,
          actions: [
            IconButton(
              icon: Icon(Icons.shopping_bag_rounded), 
              onPressed: (){}
            ),
          ],
        ),
        body: Stack(
          children: [
            Column(
              children: [
                Container(
                  height: 50,
                  color: _primaryColor,
                ),
                Expanded(child: Container())
              ],
            ),

            Positioned(
              top: 20,
              left: 16,
              right: 16,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 5,
                      color: Colors.grey[400],
                      offset: Offset(0, 1),
                      spreadRadius: -1
                    )
                  ]
                ),
                child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      contentPadding: EdgeInsets.only(left: 32, top: 16, bottom: 16),
                      fillColor: Colors.white,
                      hintText: 'Search to find more products...',
                      suffixIcon: Icon(Icons.search),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: BorderSide.none,
                      ),
                    )),
              ),
            ),

            Positioned(
              top: 80,
              left: 0,
              right: 0,
              bottom: 0,
              child: ListView.builder(
                itemBuilder: (_, i) {
                  return ListTile(
                    title: Text('Row $i'),
                  );
                }
              )
            )

          ],
        ),
      )
    );
  }
}

我如何在 flutter 中应用这个设计

How can i apply this design in flutter

textfield

dart

flutter

flutter-layout

flutter-widget