Issue with Flutter Layout (ListView and GridView) - dart

I'm new with Flutter and I got stuck building a layout with ListView.
The top section is working nice, with horizontal scroll.
But I want, a GridView below that scroll with all the whole page, not individually. It only works if I scroll on the edges.
Someone can help me, please?
Here is the code.
This is the widget that I'm in trouble
import 'package:flutter/material.dart';
import 'package:ubaia/components/titulo.dart';
class Categorias extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Titulo(title: "Categorias"),
),
GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
scrollDirection: Axis.vertical,
children: List.generate(8, (index) {
return Center(
child: Container(
height: 130,
width: 130,
color: Colors.brown,
),
);
}),
)
],
);
}
}
This is the page that i'm landing the widget
//Homepage
import 'package:flutter/material.dart';
import 'package:ubaia/components/comprados_rencentemente.dart';
import 'package:ubaia/components/categorias.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(Icons.person),
),
],
),
body: Container(
child: ListView(
padding: EdgeInsets.all(16.0),
children: <Widget>[
CompradosRecentemente(), //This is the widget that works nice
Categorias(),
],
),
),
bottomSheet: Container(
height: 50,
color: Colors.brown,
child: Center(
child: Text(
"Minha Cesta",
style: TextStyle(color: Colors.white),
)),
));
}
}

In your Code - add - physics: ClampingScrollPhysics() in GridView.count
GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
physics: ClampingScrollPhysics(), // Add this line

Related

How can I dispose Flutter WebviewScaffold on screen change?

I have a main screen that shows a header image with button to route to second screen, and a webview(scaffold) in a container below it. When I change to the second screen, the webview is still there.
This seems to be a similar problem to this one (Flutter: to close a webview when you left the page), but I can't figure out how to implement the dispose event. Can anyone help?
I am using the flutter_webview_plugin package.
Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'dart:async';
import './SecondScreen.dart';
String selectedUrl = 'https://flutter.io';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
final flutterWebViewPlugin = FlutterWebviewPlugin();
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Generated App',
theme: new ThemeData(
primarySwatch: Colors.purple,
primaryColor: const Color(0xFF8e80a8),
accentColor: const Color(0xFF8e80a8),
canvasColor: const Color(0xFF8e80a8),
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Color(0xFF8e80a8)),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(10, 30, 10, 5),
child: new Image.asset(
'lib/assets/newoldralogo1.png',
),
),
Container(
constraints: BoxConstraints.expand(
height:
Theme.of(context).textTheme.display1.fontSize * 1.1 + 10.0,
),
child: new Stack(fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Color(0xFF8e80a8)),
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Image.asset(
"lib/assets/newoldralogo1.png",
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
),
),
),
Container(
child: RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
color: Color(0xFFFFFF),
),
),
]),
),
Container(
constraints: BoxConstraints.expand(
height:
Theme.of(context).textTheme.display1.fontSize * 1.1 + 300.0,
),
padding: const EdgeInsets.fromLTRB(10, 15, 10, 5),
color: Color(0xFF8e80a8),
alignment: Alignment.center,
child: Container(
child: WebviewScaffold(
url:
('https://flutter.io/'),
),
),
)
]),
);
}
}
/*
#override
void dispose() {
super.dispose();
_MyHomePageState();
}
*/
A solution is to change the "Navigator.push" to "Navigator.pushRemove." This will mean that the first screen will not reappear, so pressing the back button (on an Android device, at least) will exit the app.
It's not quite what I was trying to do, but will work for now.
If anyone could show me where to put the "dispose" thing, I would still love to know! In the meantime, I will just keep plugging along. Thanks to those who have shared so much helpful information around the web!
By the way, here is the new code, cleaned up a bit:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import './SecondScreen.dart';
class WebView extends StatefulWidget {
#override
_WebViewState createState() => _WebViewState();
}
class _WebViewState extends State<WebView> {
TextEditingController controller = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString =
"https://stackoverflow.com/questions/43692923/flutter-container-onpressed";
launchUrl() {
setState(() {
urlString = controller.text;
flutterWebviewPlugin.reloadUrl(urlString);
});
}
#override
void initState() {
super.initState();
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
print(wvs.type);
});
}
//this part isn't working
#override
void dispose() {
_WebViewState();
// close the webview here
super.dispose();
}
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Color(0xFF8e80a8)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new GestureDetector(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 40, 10, 10),
child: new Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 +
40.0,
),
child: new Image.asset(
'lib/assets/newoldralogo1menubutton3.png',
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
)),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 250.0,
),
child: WebviewScaffold(
url: urlString,
withZoom: false,
),
),
),
],
),
);
}
}
Hiding the web view when the user navigates to the second screen
flutterWebViewPlugin.hide();
and showing it again when the user navigates back
flutterWebViewPlugin.show();
should solve the issue. By using this way user can navigate back to the first screen after navigating to the second screen.
Remember to await the Navigator.push() to the second screen.
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'dart:async';
import './SecondScreen.dart';
String selectedUrl = 'https://flutter.io';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
final flutterWebViewPlugin = FlutterWebviewPlugin();
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Generated App',
theme: new ThemeData(
primarySwatch: Colors.purple,
primaryColor: const Color(0xFF8e80a8),
accentColor: const Color(0xFF8e80a8),
canvasColor: const Color(0xFF8e80a8),
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Color(0xFF8e80a8)),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(10, 30, 10, 5),
child: new Image.asset(
'lib/assets/newoldralogo1.png',
),
),
Container(
constraints: BoxConstraints.expand(
height:
Theme.of(context).textTheme.display1.fontSize * 1.1 + 10.0,
),
child: new Stack(fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Color(0xFF8e80a8)),
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Image.asset(
"lib/assets/newoldralogo1.png",
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
),
),
),
Container(
child: RaisedButton(
onPressed: () async {
flutterWebViewPlugin.hide();
await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
flutterWebViewPlugin.show();
},
color: Color(0xFFFFFF),
),
),
]),
),
Container(
constraints: BoxConstraints.expand(
height:
Theme.of(context).textTheme.display1.fontSize * 1.1 + 300.0,
),
padding: const EdgeInsets.fromLTRB(10, 15, 10, 5),
color: Color(0xFF8e80a8),
alignment: Alignment.center,
child: Container(
child: WebviewScaffold(
url:
('https://flutter.io/'),
),
),
)
]),
);
}
}

flutter Listview itemextent

I'm struggling with the ListView.
My problem is that I've a Listview inside another Listview and the second Listview items height are not always the same. I want to get rid of the itemExtent and create an automatically height for the first Listview.
What I really want to acomplish is something like this:
#override
Widget build(BuildContext context) {
return
Column(
children: <Widget>[
TextField(),
Expanded(
child: ListView.builder(
key: new Key("ditisdekeyvoordelistview"),
itemBuilder: _makeMovieList,
padding: EdgeInsets.all(0.0),
itemCount: _movies.length,
itemExtent: 300.0,
),
),
],
);
}
//FIRST LIST
Widget _makeMovieList(BuildContext context, int index) {
return Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Container(
child: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
Image.network(
_movies[index].movieImage,
fit: BoxFit.cover,
width: 100.0,
)
])),
title: Text(
_movies[index].movieTitle,
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_makeStarRating(_movies[index].movieRating),
Text(_movies[index].movieDescription),
_makeCardDates(index)
],
),
),
);
}
//SECOND LIST
Widget _makeCardDates(int index) {
return Expanded(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.all(0.0),
itemCount: _movies[index].dateTimeList.length,
itemBuilder: (context, indexx) {
return GestureDetector(
onTap: () {
print(_movies[index].dateTimeList[indexx].toString());
},
child: Card(
elevation: 8.0,
color: Color.fromRGBO(64, 75, 96, .9),
child: Column(
children: <Widget>[
Text(_movies[index].cinema),
Text(((dateFormatMovieHours
.format(_movies[index].dateTimeList[indexx]))
.toString())),
],
)));
},
itemExtent: 40.0,
),
);
}
Using itemExtent on a ListView isn't required, though ListView needs to have a finite height set for vertical scroll (default) and finite width is needed for horizontal scroll. Otherwise, the ListView will throw a "constraints are unbounded" error.
For your use case, you can either set height on the list items in the first ListView, or set height on the second ListView. However, if you'd like the second ListView to be non-scrollable and the list items in the first ListView will adapt dynamically, you can use a Column of Widgets similar to this sample.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final items = [
'Apple',
'Banana',
'Carrot',
'Dog',
'Egg',
'Flower',
'Goat',
'Honey'
];
final subItems = ['1.00', '2.00', '3.00', '4.00'];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: firstList(),
),
);
}
firstList() {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Card(
child: Container(
color: Colors.lightBlue[50],
padding: EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
flex: 2,
child: Text('${items[index]}'),
),
Expanded(
flex: 1,
child: secondList(subItems),
),
],
),
),
),
);
},
);
}
secondList(List item) {
// Create List<Widget> for the second "List"
var subList = List<Widget>();
item.forEach((data) {
subList.add(
Card(
child: Container(
padding: EdgeInsets.all(16.0),
color: Colors.lightBlueAccent,
child: Text('$data'),
),
),
);
});
// Populate Column instead of ListView
return Column(
children: subList,
);
}
}

Change color of DataTable rows and columns

I have a small data table and i want to change the column and row background color.
But unfortunately there is no property in DataColumn or DataRow to achieve this.
The only way i found is through modifying the label of DataColumn
DataColumn(label: Container(child: Text('Person'),color: Colors.amberAccent,)),
but there is a default padding for the DataColumn and the color only applies to the text.
and here is my code:
class _ContactLocationsState extends State<ContactLocations> {
#override
Widget build(BuildContext context) {
return Center(
child: DataTable(columns: <DataColumn>[
DataColumn(label: Text('Person')),
DataColumn(label: Text('Rating')),
DataColumn(label: Text('Distance')),
DataColumn(label: Text('Max Price')),
DataColumn(label: Text('Fee')),
], rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text("test")),
DataCell(Text("test")),
DataCell(Text("test")),
DataCell(Text("test")),
DataCell(Text("test")),
],
),
]),
);
}
}
If you are still looking for answer, you can use MaterialStateColor property. Here is the working code
return DataRow.byIndex(
index: row.key,
color: MaterialStateColor.resolveWith(
(states) {
if (row.key % 2 == 0) {
return Colors.blue[50];
} else {
return Colors.white;
}
},
),
I found a way using that you can achieve exactly same look as table and also change the colors of background using Row and Expanded Widgets.
I hope that Following Code Help You.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
_controller = AnimationController(vsync: this);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text("person")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Rating")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Distance")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Max Price")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Free")
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Test")
),
),
],
),
],
),
)
),
);
}
}

Listview that contain fixed listview

I would like to basically make a Settings Screen. Actually my screen look like that with Settings section that are composed of one title and a non-scrollable list view. I would like to put these sections in a list view to make the screen scrollable and to make every settings section following the last one.
Here is my actual screen.
And here is my code.
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: SettingSection('Communication', [
SettingsPayload('Email', 'Switch', () => (print('Function :)'))),
SettingsPayload('Notifications', 'Switch'),
])),
Expanded(
child: SettingSection('Hello', [
SettingsPayload('Email', 'Normal', () => print('value'),
Icons.arrow_forward_ios),
SettingsPayload('Notifications', 'Normal', () => print('hello')),
]))
],
));
How I build each list
buildlistSettings() {
return ListView.builder(
physics: ScrollPhysics(parent: NeverScrollableScrollPhysics()),
padding: const EdgeInsets.all(15.0),
itemBuilder: (context, i) {
if (i < widget.listSettings.length) {
return Column(
children: <Widget>[
buildTileSettings(widget.listSettings[i]),
Divider(),
],
);
}
});
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(left : 10.0),
height: 25.0,
decoration:
BoxDecoration(color: Color.fromRGBO(223, 230, 233, 0.5), border: Border(bottom: BorderSide(color: Color.fromRGBO(223, 230, 233, 0.5), width: 1.0))),
child: Row(children: <Widget>[Text(
widget.title,
style: TextStyle(fontSize: 15.0, color: Colors.blueGrey),
)])),
Expanded(child: buildlistSettings()),
],
),
);
}
}
I think there's a set of problems here not least of which is trying to put a ListView inside a ListView (and having to turn off scrolling), but mostly the use of Expanded which tries to fill up all the space in the relevant direction, but inside another container, which is itself unbounded.
I would use a ListView at the root, then build up the children using simple Column, ListTile and Divider widgets. Here's a working example (duplicated your data to ensure there's enough to scroll):
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: ListView(
children: <Widget>[
SettingSection('Communication', [
SettingsPayload('Email', 'Switch', () => (print('Function :)'))),
SettingsPayload('Notifications', 'Switch'),
]),
SettingSection('Hello', [
SettingsPayload('Email', 'Normal', () => print('value'),
Icons.arrow_forward_ios),
SettingsPayload('Notifications', 'Normal', () => print('hello')),
]),
SettingSection('Communication', [
SettingsPayload('Email', 'Switch', () => (print('Function :)'))),
SettingsPayload('Notifications', 'Switch'),
]),
SettingSection('Hello', [
SettingsPayload('Email', 'Normal', () => print('value'),
Icons.arrow_forward_ios),
SettingsPayload('Notifications', 'Normal', () => print('hello')),
]),
],
),
);
}
}
class SettingSection extends StatelessWidget {
final String title;
final List<SettingsPayload> payload;
SettingSection(this.title, this.payload);
#override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0),
height: 25.0,
decoration: BoxDecoration(
color: Color.fromRGBO(223, 230, 233, 0.5),
border: Border(
bottom: BorderSide(
color: Color.fromRGBO(223, 230, 233, 0.5),
width: 1.0))),
child: Row(children: <Widget>[
Text(
this.title,
style: TextStyle(fontSize: 15.0, color: Colors.blueGrey),
)
])),
_buildListSettings(context),
],
),
);
}
Widget _buildListSettings(BuildContext context) {
List<Widget> items = List<Widget>();
for (var setting in this.payload) {
// TODO: Add logic here to determine what kind of setting widget to
// create based on the payload.
items.add(ListTile(
title: Text(setting.title),
trailing: Icon(setting.icon),
));
items.add(Divider());
}
return Column(children: items);
}
}
class SettingsPayload {
final String title;
final String type;
final Function handler;
final IconData icon;
SettingsPayload(this.title, this.type, [this.handler, this.icon]);
}
You could use ListView.builder at the root level if your incoming settings data is variable and create SettingSection widgets for each item. Depends how you're handling your data.

How to customize the SliverAppBar widget in flutter?

I would like to add some more information in the green area, but when user scrolls up, I keep the _ SliverAppBar on the top..., like this:
Here is my current source code:
body: new CustomScrollView(slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 300.0, // TODO: check out later
flexibleSpace: const FlexibleSpaceBar(
title: const Text('_SliverAppBar')
),
),
new SliverList(delegate: new SliverChildListDelegate(_galleryListItems()))
]),
The FlexibleSpaceBar has a background property the accepts any Widget
Use to build the information you need:
FlexibleSpaceBar(
title: Text('_SliverAppBar'),
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Info'),
],
),
),
Here is a more complete example that adds a subtitle and hides it when the user scrolls.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'My Flutter Pad'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
const kExpandedHeight = 300.0;
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
leading: Icon(Icons.menu),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
highlightColor: Colors.white,
onPressed: () {},
),
],
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
background: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bar.jpg"),
fit: BoxFit.cover)),
child: Column(
children: [
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('NEW GAME'),
Text('Sekiro: Shadows Dies Twice'),
RaisedButton(
onPressed: () {},
child: Text('Play'),
),
],
),
),
),
],
),
)),
),
];
},
body: Center(
child: Text("Sample Text"),
),
),
);
}
}

Resources