get.snackbar's selfsize

[tospery]

How do I use get.snackbar to display icon and messageText in itself size, instead of maxWidth?

[abetoluwani]

@tospery If this helps you can close the issue

To display an icon and messageText in a Get.snackbar with its own size instead of taking up the maximum width, you can customize the Get.snackbar widget. Here's an example of how you can achieve this:

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

void showCustomSnackbar() {
  Get.snackbar(
    'Title', 
    '',
    messageText: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.info, color: Colors.white),
        SizedBox(width: 8),
        Expanded(
          child: Text(
            'Your message here',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ],
    ),
    backgroundColor: Colors.black,
    snackPosition: SnackPosition.BOTTOM,
    borderRadius: 8,
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
    boxShadows: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        spreadRadius: 1,
        blurRadius: 10,
      ),
    ],
    duration: Duration(seconds: 3),
  );
}

Explanation:

• messageText: Used to customize the message area of the snackbar.
• Row: Used to place the icon and the text next to each other.
• mainAxisSize: MainAxisSize.min: Ensures that the Row takes up only as much horizontal space as needed by its children.
• Icon: Displays the icon.
• SizedBox: Provides space between the icon and the text.
• Expanded: Ensures that the text takes up the remaining space within the Row.

Usage:

You can call showCustomSnackbar whenever you need to display the snackbar. For example, you might call it in a button's onPressed callback:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Snackbar Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: showCustomSnackbar,
            child: Text('Show Snackbar'),
          ),
        ),
      ),
    );
  }
}

This will display a Get.snackbar with an icon and message text that sizes itself appropriately rather than taking up the maximum width. Adjust the styling as needed to fit your design requirements.

[abetoluwani]

If you want to call it from the controller also

Sure, let's simplify the implementation by removing the showLocalSnackbar method and only using the controller to show the snackbar.

Controller Implementation

File: lib/controllers/snackbar_controller.dart

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

class SnackbarController extends GetxController {
  void showCustomSnackbar() {
    Get.snackbar(
      'Title',
      '',
      messageText: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.info, color: Colors.white),
          SizedBox(width: 8),
          Expanded(
            child: Text(
              'Your message here',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
      backgroundColor: Colors.black,
      snackPosition: SnackPosition.BOTTOM,
      borderRadius: 8,
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      boxShadows: [
        BoxShadow(
          color: Colors.black.withOpacity(0.5),
          spreadRadius: 1,
          blurRadius: 10,
        ),
      ],
      duration: Duration(seconds: 3),
    );
  }
}

View Implementation

Explanation:

• SnackbarController: Contains the showCustomSnackbar method to display the snackbar.
• HomeScreen: Uses the SnackbarController to show the snackbar when the button is pressed.

Final Code for lib/main.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controllers/snackbar_controller.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final SnackbarController snackbarController = Get.put(SnackbarController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Snackbar Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            snackbarController.showCustomSnackbar();
          },
          child: Text('Show Snackbar from Controller'),
        ),
      ),
    );
  }
}

This setup ensures you only use the controller to manage snackbar notifications, maintaining a clean and organized codebase.

[tospery]

thanks