Related
So i added the files in flutter and also correctly added them under assets in the pubspec.yaml file, the names are also correct and it does not give me any errors but the images still don't show.
I added some other images in other screens and they seem to work just fine.
The logo.png is also shown in another screen with no issue but not on this screen.
Essentially the code creates two input fields and a button for a register screen and below that 3 bubbles with the facebook icon, google icon and twitter icon. It should also have the app logo above the input fields but nothing is showing.
Another question i wanted to ask is how would i change the background colour to black in a screen like this? Do i wrap the container with a scaffold?
class RegisterScreenMain extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: Body(),
),
);
}
}
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Column(children: <Widget>[
Text(
"Sign Up",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
Image.asset(
"lib/assets/images/logo.png",
height: size.height * 0.35,
),
RoundedInputField(
hintText: "Your Email",
onChanged: (value) {},
),
RoundedPasswordField(
onChanged: (value) {},
),
roundedButton(
text: "Register",
press: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return UserRegisterPreferences();
}),
);
},
),
AlreadyHaveAnAccountCheck(
login: false,
press: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return LoginScreenMain();
}),
);
},
),
OrDivider(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SocialIcon(
iconSrc: "lib/assets/images/facebook.png",
press: () {},
),
SocialIcon(
iconSrc: "lib/assets/images/twittter.png",
press: () {},
),
SocialIcon(
iconSrc: "lib/assets/images/google.png",
press: () {},
),
],
)
]);
}
}
To load image
Stop debugging app -> run flutter clean -> run flutter pub get -> uninstall app -> Start debug again
Add following line to you scaffod widget-
backgroundColor: Colors.red,
Prabanshu's answer is correct on your problem. But for the latter part of your problem, in which you asked how to change the color of the background to black, try to wrap the column of your custom body widget in a scaffold. Then you will be able to change the background color.
This will work
class RegisterScreenMain extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: Body(),
),
);
}
}
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Column(children: <Widget>[
Text(
"Sign Up",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
Image.asset(
"lib/assets/images/logo.png",
height: size.height * 0.35,
),
RoundedInputField(
hintText: "Your Email",
onChanged: (value) {},
),
RoundedPasswordField(
onChanged: (value) {},
),
roundedButton(
text: "Register",
press: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return UserRegisterPreferences();
}),
);
},
),
AlreadyHaveAnAccountCheck(
login: false,
press: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return LoginScreenMain();
}),
);
},
),
OrDivider(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SocialIcon(
iconSrc: "lib/assets/images/facebook.png",
press: () {},
),
SocialIcon(
iconSrc: "lib/assets/images/twittter.png",
press: () {},
),
SocialIcon(
iconSrc: "lib/assets/images/google.png",
press: () {},
),
],
)
]);
backgroundColor: Colors.black,
)
}
}
I am posting on StackOver Flow because I am stuck in the development of my Flutter application. I'm a beginner and I'm learning Flutter and Dart but I'm stuck on something basic, which is a bit frustrating.
I would like to display an image in the middle of the mobile application with two buttons underneath. Depending on which button I click, the image will change. I'm trying to do this to practice but I'm stuck on the layout. I can display the two buttons but I can't position the image above
import 'package:flutter/material.dart';
const appBarColor_primary = Color(0xFFEE0245);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(colorScheme: ColorScheme.light()),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Am I rich ?'),
backgroundColor: appBarColor_primary,
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://dictionary.cambridge.org/fr/images/thumb/diamon_noun_002_10599.jpg?version=5.0.158'),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(appBarColor_primary),
),
onPressed: () {},
child: Text('Yes I am Rich !'),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(appBarColor_primary),
),
onPressed: () {},
child: Text(
'No, I am poor !',
),
),
],
)));
}
}
Do you know how I could do ?
Thank you in advance for your precious help
You need a Column to place widgets vertically:
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Am I rich ?'),
backgroundColor: appBarColor_primary,
),
body: Center(
child: Column(
children: [
Image.network('https://dictionary.cambridge.org/fr/images/thumb/diamon_noun_002_10599.jpg?version=5.0.158'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(appBarColor_primary),
),
onPressed: () {},
child: Text('Yes I am Rich !'),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(appBarColor_primary),
),
onPressed: () {},
child: Text(
'No, I am poor !',
),
),
],
),
],
)));
}
}
I am using https://pub.dev/packages/sliding_up_panel and I want to trigger the opening of a new panel once a button is pressed on my existing panel.
#override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: SlidingUpPanel(
panel: Center(
child: RaisedButton(
child: Text('Show new panel'),
onPressed: () {
**///want to add code
here to trigger the callback of the new panel.**
},
),
),
collapsed: Container(
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: radius
),
child: Center(
child: Text(
"This is the collapsed Widget",
style: TextStyle(color: Colors.white),
),
),
),
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
);
}
This dependency has the capability to call an open() method with the help of a controller but I am unable to understand how to call a new sliding up panel with it (and obviously closing the existing one).
This is the code for the open() operation:
PanelController _pc = new PanelController();
...
RaisedButton(
child: Text("Open"),
onPressed: () => _pc.open(),
),
You can copy paste run full code below
You can use Column and wrap these two SlidingUpPanel with Visibility and set maintainState, maintainAnimation to true
Working demo show switch between SlidingUpPanel 1 and 2
code snippet
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
maintainState: true,
maintainAnimation: true,
visible: _visible,
child: SlidingUpPanel(
controller: _pc1,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 2'),
onPressed: () {
_pc1.close();
_visible = false;
setState(() {});
_pc2.open();
},
working demo
full code
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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> {
int _counter = 0;
PanelController _pc1 = new PanelController();
PanelController _pc2 = new PanelController();
bool _visible = true;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
maintainState: true,
maintainAnimation: true,
visible: _visible,
child: SlidingUpPanel(
controller: _pc1,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 2'),
onPressed: () {
_pc1.close();
_visible = false;
setState(() {});
_pc2.open();
},
),
),
collapsed: Container(
decoration:
BoxDecoration(color: Colors.blueGrey, borderRadius: radius),
child: Center(
child: Text(
"Panel 1",
style: TextStyle(color: Colors.orange),
),
),
),
body: Center(
child: Text(
"Panel 1 This is the Widget behind the sliding panel")),
borderRadius: radius,
),
),
Visibility(
maintainState: true,
maintainAnimation: true,
visible: !_visible,
child: SlidingUpPanel(
controller: _pc2,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 1'),
onPressed: () {
_pc2.close();
_visible = true;
setState(() {});
_pc1.open();
},
),
),
collapsed: Container(
decoration:
BoxDecoration(color: Colors.blueGrey, borderRadius: radius),
child: Center(
child: Text(
"Panel 2 ",
style: TextStyle(color: Colors.red),
),
),
),
body: Center(
child:
Text("Panel 2 This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
),
],
),
);
}
}
I would like to customize my TabBar.
Right now I have this TabBar (stock UI) :
and I would like to have this UI :
I already coded the personalized tab but I don't know how to implement it.
There is my current code about my HomePage :
class HomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController =
TabController(length: 6, vsync: this); // initialise it here
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
isScrollable: true,
tabs: [
Tab(text: "NewPay1.1"),
Tab(text: "NewMall 1.0"),
Tab(text: "海报"),
Tab(text: "企业版"),
Tab(text: "个版"),
Tab(text: "poa"),
],
),
title: Text('tabBar'),
),
body: TabBarView(
controller: _tabController,
children: [
// these are your pages
TaskListPage(),
TestPage(),
],
),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(
onPressed: () => _tabController.animateTo(0),
icon: Icon(Icons.home),
),
SizedBox(),
IconButton(
onPressed: () => _tabController.animateTo(1),
icon: Icon(Icons.more))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
return TestPage().createState();
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
);
}
}
then my CustomTab class :
class CustomTab extends StatefulWidget {
final Function(int) tabSelected;
final List<String> items;
const CustomTab({Key key, this.tabSelected, this.items}) : super(key: key);
#override
_CustomTabState createState() => _CustomTabState();
}
class _CustomTabState extends State<CustomTab> {
var categorySelected = 0;
#override
Widget build(BuildContext context) {
return _getListCategory();
}
Widget _getListCategory(){
ListView listCategory = new ListView.builder(
itemCount: widget.items.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index){
return _buildCategoryItem(index);
}
);
return new Container(
height: 50.0,
child: listCategory,
color: Colors.grey[200].withAlpha(200),
);
}
Widget _buildCategoryItem(index){
return new InkWell(
onTap: (){
setSelectedItem(index);
print("click");
},
child: new Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
margin: new EdgeInsets.only(left: 10.0),
child: new Material(
elevation: 2.0,
color: categorySelected == index ? Colors.black : Colors.grey,
borderRadius: const BorderRadius.all(const Radius.circular(25.0)),
child: new Container(
padding: new EdgeInsets.only(left: 12.0,top: 7.0,bottom: 7.0,right: 12.0),
child: new Text(widget.items[index],
style: new TextStyle(
color: categorySelected == index ? Colors.white : Colors.black),
),
),
),
)
],
),
);
}
void setSelectedItem(index) {
if(index != categorySelected) {
widget.tabSelected(index);
setState(() {
categorySelected = index;
});
}
}
}
There is already a plugin for this styled tabbar.
https://pub.dartlang.org/packages/bubble_tab_indicator
I hope this is what you are looking for :)
Yours Glup3
Try this code it is very simple
first initialize this
var radius = Radius.circular(150);
Then
class _Class_Name extends State<ClassName> {
var radius = Radius.circular(150);
#override
Widget build(BuildContext context) {
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
centerTitle: true,
leading: // if you need
),
title:
// if you need
// Scrollable rounded Tab bar
body: TabBar(
isScrollable: true,
labelColor: Colors.black,
tabs: <Widget>[
Tab(
text: "Tab 1",
),
Tab(
text: "Tab 2",
),
],
indicator: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(radius)),
color: HexColor('#005866')),
),
Container(
height: 80,
child: TabBarView(
children: <Widget>[
Container(
child: Center(
child: Text("Hello"),
),
),
Container(
child: Center(
child: Text("Hi"),
),
),
),
],
),
),
);
}
I'm having trouble with app bar animation, I'm using SilverAppBar, in my app. So, the problem is when I'm in the middle of my list and I scroll up, the app bar does not appear, but it appears just when scrolling reaches the top of the items list. I already tested the snap parameter and give it true, but not the result I expect. I have ideas about creating a custom animation for this, but I'm not too experienced in Flutter, and also if there is a way to add parameters, or another widget that will work for my situation, it would be great.
The actual code of the demo I'm using:
Widget _search() => Container(
color: Colors.grey[400],
child: SafeArea(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
enabled: false,
style: TextStyle(fontSize: 16, color: Colors.white),
decoration: InputDecoration(
prefix: SizedBox(width: 12),
hintText: "Search",
contentPadding:
EdgeInsets.symmetric(horizontal: 32.0, vertical: 14.0),
border: InputBorder.none,
),
),
),
)),
);
Container _buildBody() {
return Container(
child: new GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
));
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: new NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
title: Text("Demo",
style: TextStyle(
color: Colors.white,
)),
pinned: false,
floating: true,
forceElevated: innerBoxIsScrolled,
),
];
},
body: new Column(children: <Widget>[
_search(),
new Expanded(child: _buildBody())
])));
}
The result I have now:
Image 1
The result I got after giving true to the snap parameter:
Image 2
Plenty of applications like WhatsApp, Facebook, LinkedIn ... have this animating app bar. To explain more what exactly I expect with this animating app bar, I added an example of Google Play Store, showing the wanted animation: Play Store example
I had a similar issue with CustomScrollView and SliverAppbar using refresh indicator i ended up creating my own custom appbar.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeView extends StatefulWidget {
#override
HomeState createState() => HomeState();
}
class HomeState extends State<HomeView> with SingleTickerProviderStateMixin {
bool _isAppbar = true;
ScrollController _scrollController = new ScrollController();
#override
void initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse) {
appBarStatus(false);
}
if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
appBarStatus(true);
}
});
}
void appBarStatus(bool status) {
setState(() {
_isAppbar = status;
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: AnimatedContainer(
height: _isAppbar ? 55.0 : 0.0,
duration: Duration(milliseconds: 200),
child: CustomAppBar(),
),
),
body: ListView.builder(
controller: _scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return container();
},
),
),
);
}
}
Widget container() {
return Container(
height: 80.0,
color: Colors.pink,
margin: EdgeInsets.all(8.0),
width: 100,
child: Center(
child: Text(
'Container',
style: TextStyle(
fontSize: 18.0,
),
)),
);
}
class CustomAppBar extends StatefulWidget {
#override
AppBarView createState() => new AppBarView();
}
class AppBarView extends State<CustomAppBar> {
#override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
leading: InkWell(
onTap: () => {},
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundColor: Colors.white,
child: ClipOval(
child: Image.network(
'https://images.squarespace-cdn.com/content/5aee389b3c3a531e6245ae76/1530965251082-9L40PL9QH6PATNQ93LUK/linkedinPortraits_DwayneBrown08.jpg?format=1000w&content-type=image%2Fjpeg'),
),
),
),
),
actions: <Widget>[
IconButton(
alignment: Alignment.centerLeft,
icon: Icon(
Icons.search,
color: Colors.black,
),
onPressed: () {},
),
],
title: Container(
alignment: Alignment.centerLeft,
child: Text("Custom Appbar", style: TextStyle(color: Colors.black),)
),
);
}
}
To get this functionality to work, you will need to use the CustomScrollView widget instead of NestedScrollView. Google Documentation
Here is a working example:
class MyHomeState extends State<MyHome> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: false,
snap: false,
floating: true,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 50,
),
),
],
)
);
}
}
Example of this running here
I was able to make the floating Appbar with Tabbar similar to that of WhatsApp by using SliverAppbar with NestedScrollView. Do remember to add floatHeaderSlivers: true, in NestedScrollView. Link to sample code
import 'dart:math';
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,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CustomSliverAppbar(),
);
}
}
class CustomSliverAppbar extends StatefulWidget {
#override
_CustomSliverAppbarState createState() => _CustomSliverAppbarState();
}
class _CustomSliverAppbarState extends State<CustomSliverAppbar>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
_tabController = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text(
"WhatsApp type sliver appbar",
),
centerTitle: true,
pinned: true,
floating: true,
bottom: TabBar(
indicatorColor: Colors.black,
labelPadding: const EdgeInsets.only(
bottom: 16,
),
controller: _tabController,
tabs: [
Text("TAB A"),
Text("TAB B"),
]),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
}
class TabA extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scrollbar(
child: ListView.separated(
separatorBuilder: (context, child) => Divider(
height: 1,
),
padding: EdgeInsets.all(0.0),
itemCount: 30,
itemBuilder: (context, i) {
return Container(
height: 100,
width: double.infinity,
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
);
},
),
);
}
}