https://benzneststudios.com/blog/flutter/multi-screen-size-app-in-flutter/ ‎

animal.dart

import 'dart:ui';

class Animal {
  int id;
  String name;
  Color background;
  Color textColor;

  Animal({this.id, this.name, this.background, this.textColor});
}

animal_detail_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_tablet/animal.dart';
class MyAnimalDetailPage extends StatefulWidget {
  final Animal animal;

  MyAnimalDetailPage({@required this.animal});

  @override
  _MyAnimalDetailPageState createState() => _MyAnimalDetailPageState();
}

class _MyAnimalDetailPageState extends State<MyAnimalDetailPage> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.minWidth > 600) {
        return buildTabletLayout();
      } else {
        return buildPhoneLayout();
      }
    });
  }

  Widget buildPhoneLayout() {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
          color: widget.animal.background,
          child: Center(
              child: Text(
                widget.animal.name,
                style: TextStyle(color: widget.animal.textColor, fontSize: 32),
              ))),
    );
  }

  Widget buildTabletLayout() {
    return Scaffold(
      body: Container(
          color: widget.animal.background,
          child: Center(
              child: Text(
                widget.animal.name,
                style: TextStyle(color: widget.animal.textColor, fontSize: 52),
              ))),
    );
  }
}

animal_list_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_tablet/animal.dart';
import 'package:flutter_app_tablet/animal_detail_page.dart';

class MyAnimalListPage extends StatefulWidget {
  MyAnimalListPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyAnimalListPageState createState() => _MyAnimalListPageState();
}

class _MyAnimalListPageState extends State<MyAnimalListPage> {
  List<Animal> listAnimal;
  int currentAnimalSelected;

  @override
  void initState() {
    currentAnimalSelected = 0;
    initAnimalList();
    super.initState();
  }

  void initAnimalList() {
    listAnimal = List();
    listAnimal.add(Animal(
        id: 0, name: "Dog", background: Colors.blue, textColor: Colors.white));
    listAnimal.add(Animal(
        id: 1,
        name: "Cat",
        background: Colors.orange,
        textColor: Colors.white));
    listAnimal.add(Animal(
        id: 2,
        name: "Tiger",
        background: Colors.pink,
        textColor: Colors.white));
    listAnimal.add(Animal(
        id: 3,
        name: "Lion",
        background: Colors.purple,
        textColor: Colors.white));
    listAnimal.add(Animal(
        id: 4, name: "Bird", background: Colors.teal, textColor: Colors.white));
    listAnimal.add(Animal(
        id: 5,
        name: "Chicken",
        background: Colors.green,
        textColor: Colors.white));
    listAnimal.add(Animal(
        id: 6,
        name: "Seal",
        background: Colors.amber,
        textColor: Colors.white));
    listAnimal.add(Animal(
        id: 7,
        name: "Fish",
        background: Colors.indigoAccent,
        textColor: Colors.white));
    listAnimal.add(Animal(
        id: 8, name: "Snake", background: Colors.red, textColor: Colors.white));
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.minWidth > 600) {
        return buildTabletLayout(context);
      } else {
        return buildPhoneLayout(context);
      }
    });
  }

  Widget buildPhoneLayout(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.builder(
            itemCount: listAnimal.length,
            itemBuilder: (context, index) {
              return buildAnimalListItem(context, listAnimal[index], false);
            }));
  }

  Widget buildTabletLayout(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Row(children: <Widget>[
          Flexible(
              flex: 1,
              child: Material(
                  child: ListView.builder(
                      itemCount: listAnimal.length,
                      itemBuilder: (context, index) {
                        return buildAnimalListItem(
                            context, listAnimal[index], true);
                      }))),
          Flexible(
              flex: 3,
              child:
                  MyAnimalDetailPage(animal: listAnimal[currentAnimalSelected]))
        ]));
  }

  Widget buildAnimalListItem(
      BuildContext context, Animal animal, bool tabletMode) {
    return GestureDetector(
        onTap: () {
          if (tabletMode) {
            setState(() {
              currentAnimalSelected = animal.id;
            });
          } else {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return MyAnimalDetailPage(animal: animal);
            }));
          }
        },
        child: Container(
            color: animal.background,
            padding: EdgeInsets.all(16),
            child: Text(animal.name,
                style: TextStyle(color: animal.textColor, fontSize: 22))));
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_tablet/animal_list_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animal',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyAnimalListPage(title: 'Animal'),
    );
  }
}