GitLocker: The Coding Marketplace

Description:

flutter no internet widget

flutter_no_internet_widget #

Overview #
A new Flutter widget shows online or offline screens without extra code or dependencies.
We need a lot of boilerplate code to check every project's network connectivity. Why can't there be a single package that takes care of everything and make the developer's life easy?
I also had the same question and have created this simple widget to help myself and others.
Use case #
The package's primary purpose is to show a default offline screen and a mandatory online screen provided while initializing.
Declare this widget at the top of the widget tree once. Whenever there is no internet, the default offline screen or the provided screen will be displayed.
Example #
InternetWidget(
online: Text('Online'),
offline: Text('offline),
);
copied to clipboard
Full Example #
import 'package:flutter/material.dart';
import 'package:flutter_no_internet_widget/flutter_no_internet_widget.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return InternetWidget(
offline: const FullScreenWidget(),
// ignore: avoid_print
whenOffline: () => print('No Internet'),
// ignore: avoid_print
whenOnline: () => print('Connected to internet'),
loadingWidget: const Center(child: Text('Loading')),
online: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Center(
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondScreen(),
),
);
},
child: const Text('Navigate'),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
),
);
}
}
copied to clipboard
Video #

Use this package as a library #
Run this command:
With Dart:
dart pub add flutter_no_internet_widget
copied to clipboard
With Flutter:
flutter pub add flutter_no_internet_widget
copied to clipboard
This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):
dependencies:
flutter_no_internet_widget: [use_latest]
copied to clipboard
Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:flutter_no_internet_widget/flutter_no_internet_widget.dart';
copied to clipboard
Maintainers #

Nagaraj Alagusundaram