如何在“Scaffold”和“StreamBuilder”之间添加图像和文本标题？答案

【问题标题】：How can I add Image and Text Header between the 'Scaffold' & 'StreamBuilder'?如何在“Scaffold”和“StreamBuilder”之间添加图像和文本标题？
【发布时间】：2020-10-03 00:57:03
【问题描述】：

在这里，我尝试在“Scaffold”和“StreamBuilder”之间添加 Image 和 AppBar。但当我添加 Image 或 appBar 出现 redLine 错误，这意味着 'Scaffold' & 'StreamBuilder' 没有支持 AppBar 和 Image。

现在我应该怎么做才能在'StreamBuilder'上方有Image和AppBar

  class MyDetailPage extends StatefulWidget {
  @override
  _MyDetailPageState createState() => new  _MyDetailPageState();
}

class _MyDetailPageState extends State<MyDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

 // Want to add Image & appBar between the Scaffold & StreamBuilder .
  // How can I do this?

      body: StreamBuilder(
    stream:  Firestore.instance.collection('client').snapshots(),
    builder: (context,snapshot){
        return ListView.builder(
              itemCount: snapshot.data.documents.length,
            itemBuilder: (context,index){
                DocumentSnapshot client =snapshot.data.documents[index];
                return
                  SingleChildScrollView(
                  child:
              Container(
                    height: 300,
                    child: Card(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.purpleAccent,width: 2),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                          SizedBox(width: 10),
                               Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text('Name:- ${client['fname']}\n', style: new TextStyle(fontSize: 
                                 12.0,color: Colors.black),),
                                   Row(
                                    children: <Widget>[
                                      Expanded(
                                        child: Text('detail:- ${client['purpose']}\n', style: new 
                              TextStyle(fontSize: 12.0,),),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            )

                          ],
                        ),
                      ),
                    ),
                  )

                );
            },
        );
    },
    ),


    );
  }
}

【问题讨论】：

你想在应用栏内放一张图片吗？比如图标或背景图片？

标签： flutter dart firebase-realtime-database google-cloud-firestore

【解决方案1】：

您的图片来自哪里，是网址还是来自应用文件或手机存储。在任何情况下，您都可以轻松检查

Adding assets and images

Display images from the internet

【讨论】：

我想将图片放在 AppBar 上方，图片存储在我的文件中

【解决方案2】：

home: Scaffold(
    appBar: AppBar(
      actions: <Widget>[
        // your widget
      ],
    ),
  ),

您可以像这样将 appBar 添加到 Scaffold，您可以通过 AppBar class 了解有关 Scaffold appBar 的更多信息

【讨论】：

但是如何在 Appbar 旁边添加图片。

【解决方案3】：

选择何时放置图片

appBar:AppBar(
  <your property>:<your image widget>
)

【讨论】：