flutter_split_view 0.1.2 copy "flutter_split_view: ^0.1.2" to clipboard
flutter_split_view: ^0.1.2 copied to clipboard

Flutter widget that automatically splits the screen into two views based on available space. This is based on Navigator 2.0.

example/lib/main.dart

// ignore_for_file: prefer_const_constructors,
// ignore_for_file: prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';
import 'package:flutter_split_view/flutter_split_view.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: SplitView.material(
        child: MainPage(),
        placeholder: PlaceholderPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('click'),
          onPressed: () {
            SplitView.of(context).setSecondary(
              SecondPage(),
              title: 'Second',
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second'),
      ),
      body: Center(
        child: Builder(builder: (context) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                child: Text('back'),
                onPressed: () {
                  SplitView.of(context).pop();
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                child: Text('forward'),
                onPressed: () {
                  SplitView.of(context).push(
                    ThirdPage(),
                    title: 'Third',
                  );
                },
              ),
            ],
          );
        }),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third'),
      ),
      body: Center(
        child: Builder(builder: (context) {
          return ElevatedButton(
            child: Text('back'),
            onPressed: () {
              SplitView.of(context).pop();
            },
          );
        }),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.ba
      body: Center(
        child: Text(
          'Click the button in main view to push to here',
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey,
          ),
        ),
      ),
    );
  }
}
27
likes
140
pub points
75%
popularity

Publisher

unverified uploader

Flutter widget that automatically splits the screen into two views based on available space. This is based on Navigator 2.0.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_split_view