Flutter Card 中的文本和图像

Question

我想在卡片中同时添加图片和文字，但我做不到。我认为这里会使用一行但无法实现它。我是 flutter 和应用程序开发的新手，所以遇到了一些麻烦。非常感谢任何帮助。卡片也在 GridView 中（不在 ListView 中）。

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'lists.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
  title: 'Just Another App',
  home: Home(),
  routes: {
    "/webview": (_) => WebviewScaffold(
          withJavascript: true,
          withLocalStorage: true,
          url: 'https://www.google.com/',
          appBar: AppBar(
            title: Text('Browser'),
          ),
        ),
  },
  theme: ThemeData(primaryColor: Colors.black),
);
}
}

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final webView = FlutterWebviewPlugin();

  @override
  void initState() {
   super.initState();
   webView.close();
 } 
  @override
  Widget build(BuildContext context) {
    var gridView = GridView.builder(
        itemCount: 15,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            child: Card(
              elevation: 10,
              child: Padding(
               padding: const EdgeInsets.all(35),
               child: Container(
                 // child: SizedBox(child: Text('yashjha'),),
                 // child: Image.asset('lib/images/${images[index]}'),
                 decoration: BoxDecoration(
                   image: DecorationImage(
                     image: AssetImage('lib/images/${images[index]}'),
                     fit: BoxFit.fitWidth,
                      alignment: Alignment.topCenter,
                   ),
                 ),
               ),
             ),
            ),
            onTap: () {
              setState(() {
                Navigator.of(context).pushNamed('/webview');
              });
            },
          );
        });

return Scaffold(
  appBar: AppBar(
    title: Text('Just Another App'),
  ),
  body: Container(
    child: gridView,
    padding: EdgeInsets.all(12),
  ),
);
  }
[GridViewApp Screenshot][1]}

这是我在脚手架的“主体”中使用的变量。

Answer 1

如果要并排放置图像和文本，请添加行小部件：

child: Row(
     children: <Widget>[
         DecorationImage(...),
         Text(...),
     ],
)

您还可以设置

mainAxisAlignment

和

crossAxisAlignment

以确保您的小部件放置正确

Answer 2

只需将您的 Container 包装到 Row Widget 中并向其添加文本即可。

Row(
          children: <Widget>[
            Text("add text here"),
            Container(
              // child: SizedBox(child: Text('yashjha'),),
              // child: Image.asset('lib/images/${images[index]}'),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/images/${images[index]}'),
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topCenter,
                ),
              ),
            ),
          ],
        ),