How can I change the height of a Flutter snackbar?

user_7527342 0
Viewed 1353

I want to make a snackbar like YouTube uses for connection status, but I am not able to change the height of the snackbar. Can anybody help me on this?

image

Here is the code I have done.

Get.snackbar("", "You are connected to internet",
        snackPosition: SnackPosition.BOTTOM,
        backgroundColor: Colors.green,
        padding: EdgeInsets.symmetric(
          vertical: 0,
        ),
        barBlur: 0,
        maxWidth: double.infinity,
        snackStyle: SnackStyle.GROUNDED,
        borderRadius: 0.0);
flutter-layout dart flutter
3 Answers

Use ConnectivityWidget which exactly solve your purpose

 ConnectivityWidget(
        builder: (context, isOnline) => Center(
          child: Column([
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("${isOnline ? 'Connected' : 'No connectivity'}", style: TextStyle(fontSize: 30, color: isOnline ? Colors.green : Colors.red),),
              SizedBox(height: 20,),
              Text(
                'Number of times we connected to the internet:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        )

Output:

enter image description here

user_51065740

SnackBar takes a widget as a child.

SnackBar takes the height of the child to render.

For example

When you pass a container with height 200 it will set the snack bar's height 200.

scaffoldKey.currentState.showSnackBar(
      SnackBar(
        content: Container(
          height: 200,
          child: Center(child: Text('Hi')),
        ),
      ),
    );

Or it will grow as the snack bar's child grows.

scaffoldKey.currentState.showSnackBar(
      SnackBar(
        content: Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text('Hi'),
              SizedBox(height: 25,),
              Text('Hello'),
            ],
          ),
        ),
      ),
    );

You can create pass any widget as a child to the snack bar.

user_6227340

use connectivity_widget: ^0.1.7 connectivity_widget

dependencies:

dependencies:
     connectivity_widget: ^0.1.7

code:

           ConnectivityWidget(
            builder: (context, isOnline) => Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "${isOnline ? 'Connected' : 'Offline'}",
                    style: TextStyle(
                        fontSize: 30,
                        color: isOnline ? Colors.green : Colors.red),
                  ),
                ],
              ),
            ),
          )

Use Globally

void main() => runApp(MaterialApp(
  title: 'Flutter Calendar',
  home: Scaffold(
    body: ConnectivityWidget(
      builder: (context, isOnline) => MyApp(),
    ),
  ),
));

full code

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_applicationdemo08/splashScreen.dart';
import 'package:image_picker/image_picker.dart';
import 'package:connectivity_widget/connectivity_widget.dart';

void main() => runApp(MaterialApp(
      title: 'Flutter Calendar',
      home: Scaffold(
        body: ConnectivityWidget(
          builder: (context, isOnline) => MyApp(),
        ),
      ),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: "intel",
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Splash(),
    );
  }
}

OUTPUT:

enter image description here

user_98853520
Related