Flutter split screen in half

The split screen in half functionality in Flutter allows you to divide the screen into two equal or proportionate sections. You can achieve this by using the Row widget in combination with the Expanded widget.

Here’s an example:

    
      import 'package:flutter/material.dart';

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

      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Split Screen Demo',
            home: Scaffold(
              appBar: AppBar(
                title: Text('Split Screen Demo'),
              ),
              body: Row(
                children: [
                  Expanded(
                    child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text(
                          'Left Section',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      child: Center(
                        child: Text(
                          'Right Section',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        }
      }
    
  

In this example, we create a Flutter app with a split screen layout. The Row widget is used as the parent widget to contain the two sections of the screen. Each section is wrapped in an Expanded widget to ensure they occupy equal space.

Inside the Expanded widgets, we define two Container widgets as the left and right sections. The Container widgets have different background colors (blue and green) for better visualization.

Within each Container, we use the Center widget to vertically and horizontally align the Text widget containing the section labels.

This example provides a basic implementation of splitting the screen in half. You can further customize the layout and add your own content within each section according to your requirements.