Bug when using Offlinebuilder in Liquidswipe - flutter

Question

Hello I am using Offlinebuilder and Liquidswipe but it gives me a strange error someone knows how I can fix? thank you very much!
ERROR:
You should specify either a builder or a child
'package:flutter_offline/src/main.dart':
Failed assertion: line 41 pos 16: '!(builder is WidgetBuilder && child is Widget) && !(builder == null && child == null)'
class Luz extends State<MyApp> {
...
Widget build(BuildContext context) {
pages(bool connected) => [
//pagina1
Container(
...
),
Container(
color: Colors.pinkAccent[400],
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 5,
child: Align(
child: AnimatedContainer(
alignment: Alignment(0, 0.3),
duration: Duration(milliseconds: 600),
child: AnimatedContainer(
width: 135,
height: 135,
color: Colors.transparent,
duration: Duration(milliseconds: 1250),
curve: Curves.bounceOut,
child: GestureDetector(
onTap: () async {
...
},
child: Container(
decoration: BoxDecoration(
color:Colors.purple[700].withOpacity(0.90),
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 4,
blurRadius: 50,
offset: Offset(0, 0),
),
],
),
),
),
),
),
),
),
Expanded(
flex: 5,
child: Stack(
children: <Widget>[
Positioned(
left: 8,
right: 8,
top: 0,
child: Align(
alignment: Alignment(0, -0.3),
child: Container(
width: 250,
height: 250,
child: (
Text(
'Luz desligada',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 28,
color: Colors.white,
),
)
),
),
),
),
],
),
),
Container(
color: Colors.transparent,
child: ClipPath(
clipper: WaveClipperOne(flip: true, reverse: true),
child: Container(
height: 120,
color: Colors.limeAccent[400],
),
),
),
Positioned(
left: 35,
right: 35,
top: connected ? -1000 : 175,
child: GestureDetector(
/*onTap: () async {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.rightToLeftWithFade,
child: MyApp()
)
);
},*/
child: Container(
height: 500,
width: 250,
color: Colors.transparent,
child:Center(
child: Container(
width: 250,
height: 111,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(25),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(27, 32, 27, 0),
child: Text(
'SEM INTERNET',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(25, 1, 25, 30),
child: Text(
'RECONNECTCE',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
),
),
),
),
Column(
children: <Widget>[
Text(''),
],
),
],
),
),
];
return Scaffold(
body: OfflineBuilder(
connectivityBuilder: (
BuildContext context,
ConnectivityResult connectivity,
Widget Container,
) {
final bool connected = connectivity != ConnectivityResult.none;
return LiquidSwipe(
pages: pages(connected),
enableLoop: true,
fullTransitionValue: 700,
enableSlideIcon: false,
waveType: WaveType.liquidReveal,
positionSlideIcon: 0.7,
);
},
),
);
}
}

Answer 1

You can copy paste run full code below
Step 1: change Widget Container to Widget child
Step 2: You can use builder of OfflineBuilder and use Stack in connectivityBuilder
code snippet
bool connected;
return MaterialApp(
home: Scaffold(
body: OfflineBuilder(
connectivityBuilder: (
BuildContext context,
ConnectivityResult connectivity,
Widget child,
) {
connected = connectivity != ConnectivityResult.none;
print(connected);
return Stack(
fit: StackFit.expand,
children: [
child,
Positioned(
height: 32.0,
left: 0.0,
right: 0.0,
child: AnimatedContainer(
duration: const Duration(milliseconds: 350),
color: connected ? Color(0xFF00EE44) : Color(0xFFEE4400),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: connected
? Text('ONLINE')
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('OFFLINE'),
SizedBox(width: 8.0),
SizedBox(
width: 12.0,
height: 12.0,
child: CircularProgressIndicator(
strokeWidth: 2.0,
valueColor:
AlwaysStoppedAnimation<Color>(Colors.white),
),
),
],
),
),
),
),
],
);
},
builder: (BuildContext context) {
return LiquidSwipe(
pages: pages(connected),
fullTransitionValue: 200,
enableSlideIcon: true,
enableLoop: true,
positionSlideIcon: 0.5,
currentUpdateTypeCallback: updateTypeCallback,
waveType: WaveType.liquidReveal,
);
},
)));
working demo
full code
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
import 'package:flutter_offline/flutter_offline.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatefulWidget {
static final style = TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600,
);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int page = 0;
UpdateType updateType;
List<Container> pages(bool connected) => [
Container(
color: Colors.pink,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/500?image=14',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Hi",
style: MyApp.style,
),
Text(
"It's Me",
style: MyApp.style,
),
Text(
"Sahdeep",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.deepPurpleAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/500?image=13',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Take a",
style: MyApp.style,
),
Text(
"look at",
style: MyApp.style,
),
Text(
"Liquid Swipe",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.greenAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/500?image=11',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Liked?",
style: MyApp.style,
),
Text(
"Fork!",
style: MyApp.style,
),
Text(
"Give Star!",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.yellowAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/500?image=9',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Can be",
style: MyApp.style,
),
Text(
"Used for",
style: MyApp.style,
),
Text(
"Onboarding Design",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.redAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/500?image=10',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Do",
style: MyApp.style,
),
Text(
"Try it",
style: MyApp.style,
),
Text(
"Thank You",
style: MyApp.style,
),
],
),
],
),
),
];
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((page ?? 0) - index).abs(),
),
);
double zoom = 1.0 + (2.0 - 1.0) * selectedness;
return Container(
width: 25.0,
child: Center(
child: Material(
color: Colors.white,
type: MaterialType.circle,
child: Container(
width: 8.0 * zoom,
height: 8.0 * zoom,
),
),
),
);
}
bool connected;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: OfflineBuilder(
connectivityBuilder: (
BuildContext context,
ConnectivityResult connectivity,
Widget child,
) {
connected = connectivity != ConnectivityResult.none;
print(connected);
return Stack(
fit: StackFit.expand,
children: [
child,
Positioned(
height: 32.0,
left: 0.0,
right: 0.0,
child: AnimatedContainer(
duration: const Duration(milliseconds: 350),
color: connected ? Color(0xFF00EE44) : Color(0xFFEE4400),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: connected
? Text('ONLINE')
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('OFFLINE'),
SizedBox(width: 8.0),
SizedBox(
width: 12.0,
height: 12.0,
child: CircularProgressIndicator(
strokeWidth: 2.0,
valueColor:
AlwaysStoppedAnimation<Color>(Colors.white),
),
),
],
),
),
),
),
],
);
},
builder: (BuildContext context) {
return LiquidSwipe(
pages: pages(connected),
fullTransitionValue: 200,
enableSlideIcon: true,
enableLoop: true,
positionSlideIcon: 0.5,
currentUpdateTypeCallback: updateTypeCallback,
waveType: WaveType.liquidReveal,
);
},
)));
}
updateTypeCallback(UpdateType updateType) {
print(updateType);
}
}