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](https://i.stack.imgur.com/5rZST.png)

```
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"]),
                    )),
              ),
            ),
          );
        },
      );
    },
  );
}

```