Skip to content
Permalink
Browse files

Converting existing code to tablet adaptive layouts.

  • Loading branch information...
roughike committed Jan 28, 2018
1 parent 56ac8a5 commit daa7065ac90c5d1d96e2a92b6b93cdf05b0d3941
Showing with 118 additions and 24 deletions.
  1. +12 −3 lib/item_details.dart
  2. +17 −19 lib/item_listing.dart
  3. +2 −2 lib/main.dart
  4. +87 −0 lib/master_detail_container.dart
@@ -3,7 +3,12 @@ import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class ItemDetails extends StatelessWidget {
ItemDetails({@required this.item});
ItemDetails({
@required this.isInTabletLayout,
@required this.item,
});

final bool isInTabletLayout;
final Item item;

@override
@@ -13,16 +18,20 @@ class ItemDetails extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(
item.title,
item?.title ?? 'No item selected!',
style: textTheme.headline,
),
new Text(
item.subtitle,
item?.subtitle ?? 'Please select one on the left.',
style: textTheme.subhead,
),
],
);

if (isInTabletLayout) {
return new Center(child: content);
}

return new Scaffold(
appBar: new AppBar(
title: new Text(item.title),
@@ -1,29 +1,27 @@
import 'package:adaptive_master_detail_layouts/item.dart';
import 'package:adaptive_master_detail_layouts/item_details.dart';
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class ItemListing extends StatelessWidget {
ItemListing({
@required this.itemSelectedCallback,
this.selectedItem,
});

final ValueChanged<Item> itemSelectedCallback;
final Item selectedItem;

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Master-detail flow sample'),
),
body: new ListView(
children: items.map((item) {
return new ListTile(
title: new Text(item.title),
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (_) => new ItemDetails(item: item),
),
);
},
);
}).toList(),
),
return new ListView(
children: items.map((item) {
return new ListTile(
title: new Text(item.title),
onTap: () => itemSelectedCallback(item),
selected: selectedItem == item,
);
}).toList(),
);
}
}
@@ -1,4 +1,4 @@
import 'package:adaptive_master_detail_layouts/item_listing.dart';
import 'package:adaptive_master_detail_layouts/master_detail_container.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
@@ -11,7 +11,7 @@ class MyApp extends StatelessWidget {
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new ItemListing(),
home: new MasterDetailContainer(),
);
}
}
@@ -0,0 +1,87 @@
import 'dart:math';

import 'package:adaptive_master_detail_layouts/item.dart';
import 'package:adaptive_master_detail_layouts/item_details.dart';
import 'package:adaptive_master_detail_layouts/item_listing.dart';
import 'package:flutter/material.dart';

class MasterDetailContainer extends StatefulWidget {
@override
_ItemMasterDetailContainerState createState() =>
new _ItemMasterDetailContainerState();
}

class _ItemMasterDetailContainerState extends State<MasterDetailContainer> {
static const int kTabletBreakpoint = 600;

Item _selectedItem;

Widget _buildMobileLayout() {
return new ItemListing(
itemSelectedCallback: (item) {
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) {
return new ItemDetails(
isInTabletLayout: false,
item: item,
);
},
),
);
},
);
}

Widget _buildTabletLayout() {
return new Row(
children: <Widget>[
new Flexible(
flex: 1,
child: new Material(
elevation: 4.0,
child: new ItemListing(
itemSelectedCallback: (item) {
setState(() {
_selectedItem = item;
});
},
selectedItem: _selectedItem,
),
),
),
new Flexible(
flex: 3,
child: new ItemDetails(
isInTabletLayout: true,
item: _selectedItem,
),
),
],
);
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Master-detail flow sample'),
),
body: new LayoutBuilder(
builder: (context, constraints) {
final double smallestDimension = min(
constraints.maxWidth,
constraints.maxHeight,
);

if (smallestDimension < kTabletBreakpoint) {
return _buildMobileLayout();
}

return _buildTabletLayout();
},
),
);
}
}

0 comments on commit daa7065

Please sign in to comment.
You can’t perform that action at this time.