向FlutterToast添加前导图标

vbopmzt1  于 2022-12-05  发布在  Flutter
关注(0)|答案(4)|浏览(312)

我是flutter的新手,我在flutter应用程序中有一个FlutterToast,它在按下按钮时调用。
是否可以在FlutterToast中添加前导图标
Flutter吐司:

Fluttertoast.showToast(
   msg: "Press and hold to send Alert!",
   toastLength: Toast.LENGTH_LONG,
   gravity: ToastGravity.CENTER,
   timeInSecForIosWeb: 1,
   backgroundColor: Colors.white,
   textColor: Colors.black87,
   fontSize: 16.0
  );
cwxwcias

cwxwcias1#

你可以使用你正在使用的同一个包中的FToast。它需要一个子部件来代替一些文本,我认为这更灵活。
下面是一个快速实现,它可以完成您想要的任务:

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

main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  FToast fToast;

  @override
  void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          fToast.showToast(
            toastDuration: Duration(milliseconds: 500),
            child: Material(
              color: Colors.white,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(Icons.face),
                  Text(
                    "Press and hold to send Alert!",
                    style: TextStyle(color: Colors.black87, fontSize: 16.0),
                  )
                ],
              ),
            ),
            gravity: ToastGravity.CENTER,
          );
        },
      ),
      body: Center(
        child: Text('Text'),
      ),
    );
  }
}
gev0vcfq

gev0vcfq2#

检查此包https://pub.dev/packages/flutter_flexible_toast您可以在其构造函数中设置前导图标

osh3o9ms

osh3o9ms3#

当然,您可以根据需要自定义子部件。

编辑:

正如@Lulupointu强调的那样,您需要使用同一个包中的FToast。

FToast fToast;

   fToast.showToast(
      // In here!
      child: customizedLeadingIconWidget,        
      gravity: ToastGravity.CENTER,
     );

您的自定义小工具将如下所示:

Widget customizedLeadingIconWidget = Container(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25.0),
          color: Colors.greenAccent,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.check, // Set your own leading icon!
              color: Colors.red,
            ),
            SizedBox(
              width: 12.0,
            ),
            Text("This is a Custom Toast"),
          ],
        ),
      );
ct3nt3jp

ct3nt3jp4#

使用图标显示吐司或自定:使用这个Flutter Flexible吐司
第一个

相关问题