How can I keep the two images in one screen? - flutter

Question

How can I split the screen into two different parts. I'm learning filters and I made this code
I want to add images from the server
When I put picture number 1 or 2 for the first time, there is no problem
But when choosing the second image, the first image is deleted. I think because it refreshed the page (rebuild)
How can I keep the two images in one screen? What is the best way?
Thank you
ٍ Split the screen into two parts
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lifetb/constants/my_colors.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
class BeforeAfter2 extends StatefulWidget {
const BeforeAfter2({
Key? key,
this.imageSelected1,
this.imageSelected2,
}) : super(key: key);
final imageSelected1;
final imageSelected2;
#override
_BeforeAfter2State createState() => _BeforeAfter2State();
}
/// change it to Cata
var imageSelected1;
var imageSelected2;
var imageBody = true;
var id;
var username;
var email;
getPref() async {
SharedPreferences preferences = await SharedPreferences.getInstance();
username = preferences.getString("username");
id = preferences.getString("id");
email = preferences.getString("email");
if ( id == null) {
print("empty");
}
}
Future getData() async {
getPref();
if ( id == null) {
print("empty 2");
}
var url = "http://10.0.2.2/641984.php";
var data = {"user_id": "$id"};
var response = await http.post(Uri.parse(url), body: data);
var responsebody = jsonDecode(response.body);
return responsebody;
}
class _BeforeAfter2State extends State<BeforeAfter2> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Expanded(
flex: 1,
child: SizedBox(
height: double.infinity,
width: double.infinity,
child: widget.imageSelected1 == null
? addImage(true,true)
: showCata()
),
),
Expanded(
flex: 1,
child: SizedBox(
height: double.infinity,
width: double.infinity,
child: widget.imageSelected2 == null
? addImage(false,true)
: showCata1()
),
),
],
),
));
}
}
addImage(addText, goToAdd) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
addText ? Text("Add 1 Photo") : Text("Add 2 Photo"),
SizedBox(height: 26),
Container(
alignment: Alignment.center,
child: FloatingActionButton(
heroTag: null,
child: Icon(
Icons.add,
color: white,
size: 45,
),
onPressed: () {
goToAdd
? showCata()
: showCata1();
},
)),
],
),
],
);
}
showCata(){
return FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected1: snapshot.data[i]["post_image"],
);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}
showCata1(){
return FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected2: snapshot.data[i]["post_image"],
);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}

Answer 1

remove SizedBox()s and change SafeArea with child

Answer 2

class _BeforeAfter2State extends State<BeforeAfter2> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Expanded(
flex: 1,
child: widget.imageSelected1 == null
? addImage(true,true)
: showCata()
),
Expanded(
flex: 1,
child: widget.imageSelected2 == null
? addImage(false,true)
: showCata1()
),
],
),
));
}
}
addImage(addText, goToAdd) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
addText ? Text("Add 1 Photo") : Text("Add 2 Photo"),
SizedBox(height: 26),
Container(
alignment: Alignment.center,
child: FloatingActionButton(
heroTag: null,
child: Icon(
Icons.add,
color: white,
size: 45,
),
onPressed: () {
goToAdd
? showCata()
: showCata1();
},
)),
],
),
],
);
}
showCata(){
return FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected1: snapshot.data[i]["post_image"],
);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}
showCata1(){
return FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected2: snapshot.data[i]["post_image"],
);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}