วิธีสร้าง Toast ใน Flutter


167

ฉันสามารถสร้างสิ่งที่คล้ายกับToastsใน Flutter ได้หรือไม่? เพียงแค่หน้าต่างแจ้งเตือนเล็ก ๆ ที่ไม่ได้อยู่ตรงหน้าผู้ใช้และไม่ล็อคหรือทำให้มุมมองจางหายไป?

คำตอบ:


205

คุณสามารถเข้าถึงผู้ปกครองScaffoldStateโดยใช้Scaffold.of(context)

จากนั้นทำสิ่งที่ชอบ

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Sending Message"),
    ));

Snackbars เป็น "Toast" อย่างเป็นทางการจากการออกแบบวัสดุ ดูhttps://material.io/design/components/snackbars.html#usage

นี่คือตัวอย่างการทำงานอย่างสมบูรณ์:

ป้อนคำอธิบายรูปภาพที่นี่

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snack bar'),
      ),

      /// We use [Builder] here to use a [context] that is a descendant of [Scaffold]
      /// or else [Scaffold.of] will return null
      body: Builder(
        builder: (context) => Center(
              child: RaisedButton(
                child: const Text('Show toast'),
                onPressed: () => _showToast(context),
              ),
            ),
      ),
    );
  }

  void _showToast(BuildContext context) {
    final scaffold = Scaffold.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: const Text('Added to favorite'),
        action: SnackBarAction(
            label: 'UNDO', onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }
}

1
สิ่งนี้จะถูกห่อไว้ในตัวอย่างบนแท่นพิมพ์อย่างไร? เพราะฉันได้ลองแล้วไม่มีอะไรปรากฏขึ้นบนหน้าจอ
aziza

ฉันไม่พอดีกับแม่พิมพ์และฉันรู้ว่า "เป็นทางการ" ไม่ได้แปลว่าสมบูรณ์ !! Snackbar ดูดจริงๆสำหรับแอพ UX ของฉันดังนั้นฉันจึงยังคงชัดเจนและใช้การแจ้งเตือนแบบป๊อปอัพที่ลอยอยู่เสมอ ฉันรู้สึกว่ามันง่ายมากสำหรับผู้ใช้ที่จะพลาดการแจ้งเตือน Snackbar (โดยเฉพาะถ้าพวกเขาไม่คุ้นเคย) แต่มันไม่ใช่เรื่องง่ายที่จะพลาดป๊อปอัพที่ลอยอยู่ตรงกลางด้านบนหรือด้านล่างของหน้าจอ
SilSur

@aziza หุ้มวิดเจ็ตปุ่มของคุณใน Builder () มันจะทำงาน
Tabrizapps

เรียกเครื่องมือshowSnackBar()ควรมีScaffoldผู้ปกครอง
Lahiru Chandima

80

ใช้ปลั๊กอินนี้

Fluttertoast.showToast(
        msg: "This is Toast messaget",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 1
    );

ป้อนคำอธิบายรูปภาพที่นี่


2
คุณต้องเพิ่มการพึ่งพา Fluttertoast ในไฟล์ pubspec.yaml ก่อน ลิงก์ไปยังการพึ่งพาอยู่ที่นี่ [ลิงค์] ( pub.dartlang.org/packages/fluttertoast ) จากนั้นคุณสามารถใช้รหัสด้านบน
fritz-playmaker

Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)
Robin

1
ตอนนี้มันใช้งานได้ฉันต้องหยุดแอพและ Run 🏃‍♂️ โดยไม่ต้องดีบัก :)
Robin

ทุกคนประสบปัญหาที่ขอบวงกลมถูกปิดใช้งานหลังจากตั้งค่า bg color github.com/PonnamKarthik/FlutterToast/issues/156
thanhbinh84

73

SnackBar แน่นอนว่าเป็นคลาสที่เหมาะสมที่จะใช้ตามที่ Darky ระบุ

สแน็คบาร์

สิ่งหนึ่งที่หากินเกี่ยวกับshowSnackBarการเดินทางไปScaffoldStateถ้าคุณกำลังพยายามที่จะเรียกภายในสร้างวิธีการที่คุณสร้างของคุณshowSnackBarScaffold

คุณอาจเห็นข้อผิดพลาดเช่นนี้ซึ่งรวมถึงข้อความที่อธิบายถึงวิธีการแก้ไขปัญหา

══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
Scaffold.of() called with a context that does not contain a Scaffold.
No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This
usually happens when the context provided is from the same StatefulWidget as that whose build
function actually creates the Scaffold widget being sought.
There are several ways to avoid this problem. The simplest is to use a Builder to get a context that
is "under" the Scaffold. For an example of this, please see the documentation for Scaffold.of():
  https://docs.flutter.io/flutter/material/Scaffold/of.html
A more efficient solution is to split your build function into several widgets. This introduces a
new context from which you can obtain the Scaffold. In this solution, you would have an outer widget
that creates the Scaffold populated by instances of your new inner widgets, and then in these inner
widgets you would use Scaffold.of().
A less elegant but more expedient solution is assign a GlobalKey to the Scaffold, then use the
key.currentState property to obtain the ScaffoldState rather than using the Scaffold.of() function.
The context used was:
  MyHomePage
When the exception was thrown, this was the stack:
#0      Scaffold.of (package:flutter/src/material/scaffold.dart:444:5)
#1      MyHomePage.build.<anonymous closure> (/Users/jackson/Library/Developer/CoreSimulator/Devices/7072C907-DBAD-44FE-8F40-0257442C51D9/data/Containers/Data/Application/77FEC1A4-1453-442C-8208-96E0323DEFB2/tmp/so_scratch2Tkq9Jb/so_scratch2/lib/main.dart:23:24)
#2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:323:14)
#3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:375:30)
#4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
#5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:149:9)
#6      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:119:7)
#7      GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
#8      BindingBase&SchedulerBinding&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:147:20)
#9      BindingBase&SchedulerBinding&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121:22)
#10     BindingBase&SchedulerBinding&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101:7)
#11     BindingBase&SchedulerBinding&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64:7)
#12     BindingBase&SchedulerBinding&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48:7)
#13     _invoke1 (file:///b/build/slave/Mac_Engine/build/src/flutter/lib/ui/hooks.dart:100)
#14     _dispatchPointerDataPacket (file:///b/build/slave/Mac_Engine/build/src/flutter/lib/ui/hooks.dart:58)
Handler: onTap
Recognizer:
  TapGestureRecognizer#69dbc(debugOwner: GestureDetector, state: ready)
════════════════════════════════════════════════════════════════════════════════════════════════════

คุณสามารถส่งผ่านGlobalKeyไปยังผู้Scaffoldสร้างของคุณ:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final key = new GlobalKey<ScaffoldState>();
    return new Scaffold(
      key: key,
      floatingActionButton: new Builder(
        builder: (BuildContext context) {
          return new FloatingActionButton(
            onPressed: () {
              key.currentState.showSnackBar(new SnackBar(
                content: new Text("Sending Message"),
              ));
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        }
      ),
    );
  }
}

หรือคุณสามารถใช้ a Builderเพื่อสร้าง a BuildContextที่เป็นลูกของ Scaffold

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new Builder(
        builder: (BuildContext context) {
          return new FloatingActionButton(
            onPressed: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Sending Message"),
              ));
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        }
      ),
    );
  }
}

ในที่สุดคุณสามารถแบ่งวิดเจ็ตของคุณออกเป็นหลายคลาสซึ่งเป็นแนวทางระยะยาวที่ดีที่สุด


พยายาม GlobalKey ตอนนี้ฉันได้รับการยกเว้นนี้: I/flutter ( 4965): The following assertion was thrown while handling a gesture: I/flutter ( 4965): type 'LabeledGlobalKey<ScaffoldState>' is not a subtype of type 'BuildContext' of 'context' where I/flutter ( 4965): LabeledGlobalKey is from package:flutter/src/widgets/framework.dart I/flutter ( 4965): ScaffoldState is from package:flutter/src/material/scaffold.dart I/flutter ( 4965): Scaffold is from package:flutter/src/material/scaffold.dart I/flutter ( 4965): BuildContext is from package:flutter/src/widgets/framework.dart
Shajeel Afzal

1
ดูเหมือนว่าคุณกำลังใช้GlobalKeyเป็นอาร์กิวเมนต์ในที่ที่BuildContextคาดไว้ ฉันไม่สามารถช่วยให้คุณแก้ไขข้อบกพร่องนี้ได้อีกหากไม่เห็นรหัสของคุณมากขึ้น โปรดโพสต์บรรทัดของรหัสที่มีข้อยกเว้นอาจเป็นไปได้ว่าคุณไม่ได้ใช้อาร์กิวเมนต์ที่ถูกต้อง
Collin Jackson

2
ฉันสามารถยืนยันได้ว่าใช้Builderตัวเลือกที่คุณให้มาใช้ได้ดี พบกับปัญหานี้และนี่แก้ไขได้สำหรับฉัน
SeaFuzz

ฉันได้รับข้อผิดพลาดด้วยวิธีการ GlobalKey แต่การประกาศfinal key = new GlobalKey<ScaffoldState>();นอกเครื่องมือสร้างคงที่
ซาก้า

หนึ่งในคำตอบที่ดีที่สุดใน StackOverflow! ขอบคุณ @CollinJackson
Masterfego

13

เพื่อแสดงข้อความขนมปังปิ้งคุณสามารถใช้ปลั๊กอิน flutterToast เพื่อใช้ปลั๊กอินนี้ที่คุณต้องทำ

  1. เพิ่มการอ้างอิงนี้ไปยังไฟล์ pubspec.yaml ของคุณ: - fluttertoast: ^3.1.0
  2. เพื่อให้ได้แพ็คเกจคุณต้องใช้คำสั่งนี้: - $ flutter packages get
  3. นำเข้าแพคเกจ: - import 'package:fluttertoast/fluttertoast.dart';

ใช้มันแบบนี้

Fluttertoast.showToast(
        msg: "your message",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM // also possible "TOP" and "CENTER"
        backgroundColor: "#e74c3c",
        textColor: '#ffffff');

สำหรับข้อมูลเพิ่มเติมตรวจสอบสิ่งนี้


24
แทนที่จะตอบคำตอบเดียวกับที่คนอื่นโพสต์ไว้คุณสามารถยกระดับคำตอบของเขาได้
CopsOnRoad

7

fluttertoast: ^ 3.1.3

import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

โปรดลองเพิ่มประโยคอธิบายหนึ่งหรือสองประโยคซึ่งอธิบายตำแหน่งที่จะวางรหัสใด บางอย่างเช่น "เพิ่มแพ็คเกจลงใน pubspec ของคุณ" และ "ในรหัสให้ใช้:"
mlyko

6

ฉันต้องการให้ทางเลือกอื่นในการใช้แพ็คเกจ flushbar https://github.com/AndreHaueisen/flushbar
ตามแพ็คเกจที่กล่าวไว้: ใช้แพ็คเกจนี้หากคุณต้องการการปรับแต่งเพิ่มเติมเมื่อแจ้งผู้ใช้ของคุณ สำหรับนักพัฒนา Android มันถูกสร้างขึ้นมาเพื่อทดแทนขนมปังปิ้งและสแน็คบาร์
ข้อเสนอแนะอีกวิธีในการใช้ flushbar วิธีการแสดงสแน็คบาร์หลังจาก navigator.pop (บริบท) ใน Flutter
คุณยังสามารถตั้งค่า flushbarPosition เป็น TOP หรือ BOTTOM
ป้อนคำอธิบายรูปภาพที่นี่

    Flushbar(
      title: "Hey Ninja",
      message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],
      backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: false,
      duration: Duration(seconds: 4),
      icon: Icon(
        Icons.check,
        color: Colors.greenAccent,
      ),
      mainButton: FlatButton(
        onPressed: () {},
        child: Text(
          "CLAP",
          style: TextStyle(color: Colors.amber),
        ),
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Text(
        "You killed that giant monster in the city. Congratulations!",
        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),
      ),
    )..show(context);

5

นำเข้า lib

fluttertoast: 3.1.3

ใช้เหมือนด้านล่าง

Fluttertoast.showToast(
msg: "Hello world",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,

);


4

ในกรณีที่แพคเกจ Fluttertoast ให้การทำงานเพื่อให้ห่างไกลไม่ได้ ... แล้วผมจะแนะนำให้คุณลองขนมปัง
มันไม่มีความหรูหราและไม่มีพิธี

ป้อนคำอธิบายรูปภาพที่นี่

มันใช้งานได้

ฉันสังเกตเห็นข้อผิดพลาดในตัวอย่างที่ระบุไว้ใน Readme ของมันว่า:

Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

ในขณะที่วิธีการนั้นต้องการบริบท ดังนั้นควรเพิ่ม 'บริบท' เช่นนี้:

Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

มีโอกาสที่จะได้รับการแก้ไขตามเวลาที่คุณตรวจสอบว่าฉันส่ง PR ไปแล้ว


ฉันชอบปลั๊กอินนี้มากกว่าpub.dartlang.org/packages/fluttertoastปลั๊กอิน อันนี้สะอาดกว่า [รัดกุม] และปรับแต่งง่ายขึ้น
SilSur

2

มีสามวิธีในการแสดงขนมปังปิ้งบนแอพพลิเคชั่น
ฉันจะบอกคุณเกี่ยวกับวิธีทั้งสามที่ฉันรู้และเลือกว่าคุณต้องการใช้วิธีใด ฉันอยากจะแนะนำที่สอง

1: การใช้แพ็กเกจภายนอก

นี่เป็นวิธีแรกซึ่งเป็นวิธีที่ง่ายที่สุดในการแสดงขนมปังปิ้งในแอพพลิเคชั่นที่พลิ้วไหว

ก่อนอื่นคุณต้องเพิ่มแพ็คเกจนี้ใน pubspec.yaml

flutter_just_toast:^version_here

จากนั้นนำเข้าแพคเกจในไฟล์ที่คุณต้องการแสดงขนมปัง

'package:flutter_just_toast/flutter_just_toast.dart';

และขั้นตอนสุดท้ายแสดงขนมปัง

Toast.show( message: "Your toast message", 
           duration: Delay.SHORT, 
           textColor: Colors.black);

2: ใช้วิธีการอย่างเป็นทางการ

วิธีนี้ก็ง่าย แต่คุณต้องจัดการกับมัน ฉันไม่ได้บอกว่ามันยากมันเรียบง่ายและสะอาดฉันอยากจะแนะนำวิธีนี้

สำหรับวิธีนี้สิ่งที่คุณต้องทำคือการใช้รหัสด้านล่าง

Scaffold.of(context).showSnackBar(SnackBar(
          content: Text("Sending Message"),
        ));

แต่จำไว้ว่าคุณต้องใช้บริบทของนั่งร้าน

3: ใช้ api ดั้งเดิม

ตอนนี้วิธีนี้ไม่สมเหตุสมผลอีกต่อไปเมื่อคุณมีสองวิธีข้างต้น ใช้วิธีนี้คุณต้องเขียนโค้ดเนทีฟสำหรับ Android และ iOS แล้วแปลงเป็นปลั๊กอินและคุณพร้อม วิธีนี้จะใช้เวลาของคุณและคุณต้องบูรณาการล้อ ซึ่งได้ถูกประดิษฐ์ขึ้นแล้ว



1

เพิ่ม flutter_just_toast เพื่อการอ้างอิงของคุณใน Pubspecs.yaml ของคุณ

อ้างอิง:

flutter_just_toast: ^1.0.1

แพ็คเกจนำเข้าถัดไปในชั้นเรียนของคุณ:

import 'package:flutter_just_toast/flutter_just_toast.dart';

ใช้งาน Toast พร้อมข้อความ

Toast.show( message: "Your toast message", 
    duration: Delay.SHORT, 
    textColor: Colors.black);


1

สำหรับสิ่งนี้มีหลายรุ่น

1) ก่อนอื่นคุณสามารถใช้ SnackBar ซึ่งเป็นวิดเจ็ตใน Flutter

2) คุณสามารถใช้ไลบรารีเช่นขนมปังปิ้ง flutter_toast จาก pub.dev

3) รุ่นที่สามกำลังสร้างวิดเจ็ตที่กำหนดเองของคุณ สามารถสร้างได้โดยใช้วิดเจ็ตภาพซ้อนทับและภาพเคลื่อนไหวใน Flutter

คุณสามารถกวดวิชานี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับมัน นี่คือลิงค์



0

https://pub.dev/packages/toastใช้สำหรับขนมปังนี้ห้องสมุดนี้ใช้งานง่ายและสมบูรณ์แบบสำหรับ iOS และ Android

ไวยากรณ์สำหรับ Show Toast:

Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);

0

ขั้นตอนที่ 1:

อ้างอิง:

flutter_just_toast: ^1.0.1

ขั้นตอนที่ 2:

import 'package:flutter_just_toast/flutter_just_toast.dart';

ขั้นตอนที่ 3:

Toast.show(
message: "Your toast message",
duration: Delay.SHORT,
textColor: Colors.black);


0

ใช้การพึ่งพานี้: toast: ^0.1.3 จากนั้นนำเข้าการพึ่งพาของขนมปังในหน้า: import 'package:toast/toast.dart'; จากนั้นบน onTap () ของวิดเจ็ต: Toast.show("Toast plugin app", context,duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);


0

คุณสามารถใช้แพ็คเกจนี้: ขนมปังปิ้ง

เพิ่มบรรทัดนี้เพื่อการอ้างอิงของคุณ

toast: ^0.1.5

จากนั้นใช้แบบนี้:

import 'package:toast/toast.dart';
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);

0

รับแพ็คเกจขนมปังปิ้งกระพือที่นี่

เพิ่มแพคเกจนี้เพื่อการอ้างอิงโครงการของคุณใน pubspec.yaml

จากนั้นเมื่อใดก็ตามที่คุณต้องการให้ Toast แสดงเหมือนในการกดปุ่ม

Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);


0

คุณสามารถใช้ไลบรารี "กระพือ" หากต้องการทำสิ่งนี้ให้เพิ่มลงในไฟล์ pubspec.yaml เช่น:

dependencies:
  fluttertoast: ^3.1.0

จากนั้นนำเข้าไลบรารีนั้นในไฟล์โผคุณต้องการขนมปังปิ้งและเขียนรหัสของคุณ ตัวอย่างเช่นอ้างถึงรหัสต่อไปนี้:

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



class ToastExample extends StatefulWidget {
    @override
    _ToastExampleState createState() {
      return _ToastExampleState();
    }
  }

  class _ToastExampleState extends State {
    void showToast() {
      Fluttertoast.showToast(
          msg: 'Some text',
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIos: 1,
          backgroundColor: Colors.red,
          textColor: Colors.white
      );
    }

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Toast Tutorial',
        home: Scaffold(
            appBar: AppBar(
              title: Text('Toast Tutorial'),
            ),
            body: Padding(
              padding: EdgeInsets.all(15.0),
              child: Center(
                child: RaisedButton(
                  child: Text('Press to show'),
                  onPressed: showToast,
                ),
              ),
            )
        ),
      );
    }
  }

  void main() => runApp(ToastExample());

0

นำเข้า cupertino_icons: ^0.1.2และเขียนรหัสด้านล่าง

showToast(BuildContext context, String message) {
 showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog( 
title: Text("Name of App",
          content: Text(message,
          actions: <Widget>[
            FlatButton(
              child: Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        );
      });

0

สำหรับข้อความของขนมปังปิ้งใน flutter ให้ใช้bot_toast library ห้องสมุดนี้มีคุณสมบัติที่หลากหลายรองรับการแสดงการแจ้งเตือนข้อความโหลดสิ่งที่แนบมา ฯลฯ Toast

ป้อนคำอธิบายรูปภาพที่นี่


0

มันค่อนข้างง่าย

เราแค่ต้องติดตั้งชุดขนมปังปิ้งกระพือ อ้างถึงเอกสารต่อไปนี้: https://pub.dev/packages/fluttertoast

ในแท็บการติดตั้งคุณจะได้รับการพึ่งพาซึ่งคุณจะต้องวางไว้ใน pubspec.yaml แล้วติดตั้ง

หลังจากนี้เพียงนำเข้าแพ็คเกจ:

นำเข้า 'แพคเกจ: fluttertoast / fluttertoast.dart';

คล้ายกับบรรทัดด้านบน

และจากการใช้คลาส FlutterToast คุณสามารถใช้ Fluttertoast ของคุณได้

คุณทำเสร็จแล้ว !!!


-1

มันค่อนข้างง่ายที่จะแสดง Toast Message ใน FlutterScaffold.of(context).showSnackBar(SnackBar( content: Text("Toast Text Here"), ));


-2

คุณสามารถใช้สิ่งที่ชอบ FlutterToast

นำเข้า lib

fluttertoast: ^2.1.4

ใช้เหมือนด้านล่าง

Fluttertoast.showToast(
    msg: "Hello world",
    textColor: Colors.white,
    toastLength: Toast.LENGTH_SHORT,
    timeInSecForIos: 1,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.indigo,
);

แค่นั้นแหละ..

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.