flutter layout trouble for add image above two button - image

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 !',
),
),
],
),
],
)));
}
}

Related

Everything is showing except the images Flutter

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,
)
}
}

How do I call a sliding up panel in Flutter?

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,
),
),
],
),
);
}
}

Flutter, Carousel Text change with Image change

Row(
children: <Widget>[
new Expanded(
child: SizedBox(
height: 150.0,
width: 300,
child: Carousel(
boxFit: BoxFit.cover,
autoplay: true,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
dotSize: 6.0,
dotIncreasedColor: Colors.grey,
dotBgColor: Colors.transparent,
dotPosition: DotPosition.bottomCenter,
dotVerticalPadding: 10.0,
showIndicator: true,
indicatorBgPadding: 7.0,
images: [
AssetImage('assets/mountain.jpg'),
AssetImage('assets/mountain2.png')
],
),
),
),
// Other children below
]
)
Hi, I've managed to implement a carousel but I am wondering how you can add Text to it on the center. When the carousel moves to a new image I want the text to change to. I am using carousel_pro 1.0.0.
You can copy paste run full code below
image attribute actually can use widget , so you can use Card
code snippet
images: [
Card(
child:
Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle:
Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Image.network(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
])),
working demo
full code
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
class CarouselPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 300.0,
width: 300.0,
child: Carousel(
boxFit: BoxFit.cover,
autoplay: false,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
dotSize: 6.0,
dotIncreasedColor: Color(0xFFFF335C),
dotBgColor: Colors.transparent,
dotPosition: DotPosition.topRight,
dotVerticalPadding: 10.0,
showIndicator: true,
indicatorBgPadding: 7.0,
images: [
Card(
child:
Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle:
Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Image.network(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
])),
Card(
child:
Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle:
Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Image.network(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
])),
],
),
),
),
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CarouselPage(),
);
}
}
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;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
This is complete working code with Image on top with text and dots. For this you need to use these two libraries:- " carousel_slider: ^4.1.1 ", "smooth_page_indicator: ^1.0.0+2", update them to the latest.
class MyItem {
String itemName;
String path;
MyItem(this.itemName, this.path);
}
class craouselImage extends StatefulWidget {
#override
_craouselImage createState() => _craouselImage();
}
class _craouselImage extends State<craouselImage> {
int activeIndex = 0;
List<MyItem> items = [
MyItem("item 1", 'assets/images/appiconlogo.png'),
MyItem("item 2", 'assets/images/Mockup4.png'),
];
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
CarouselSlider.builder(
itemCount: items.length,
options: CarouselOptions(
height: 400,
viewportFraction: 1,
autoPlay: true,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
autoPlayInterval: const Duration(seconds: 1),
onPageChanged: (index, reason) {
setState(() {
activeIndex = index;
});
},
),
itemBuilder: (context, index, realIndex) {
final imgList = items[index];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(child: buildImage(imgList.path, index)),
const SizedBox(
height: 15,
),
buildText(imgList.itemName, index),
],
);
},
),
const SizedBox(
height: 22,
),
buildIndicator(),
const SizedBox(
height: 22,
),
//buildText(itemName, index),
// buildText(),
],
),
);
}
Widget buildImage(String imgList, int index) => Container(
margin: const EdgeInsets.symmetric(horizontal: 12),
color: Colors.transparent,
child: Align(
alignment: Alignment.center,
child: Image.asset(
imgList,
fit: BoxFit.cover,
),
),
);
buildIndicator() => AnimatedSmoothIndicator(
activeIndex: activeIndex,
count: items.length,
effect: const JumpingDotEffect(
dotColor: Colors.black,
dotHeight: 15,
dotWidth: 15,
activeDotColor: mRed),
);
buildText(String itemName, int index) => Align(
alignment: FractionalOffset.bottomCenter,
child: Text(
itemName,
style: const TextStyle(
fontWeight: FontWeight.w700, fontSize: 23, color: mRed),
));
}

How to know if appbar is scrolled in flutter?

I've used the sliver appbar widget to create a UI, but my problem is that I can't control the scroll.
what I want is when it scrolled the text color changes and vice versa.
my code:
import 'package:flutter/material.dart';
class Sliver extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, isScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.white,
title: Text(
'Alexander Sebastian',
style: TextStyle(
color: isScrolled ? Colors.black : Colors.white,
),
),
),
];
},
body: Center(
child: Text(
'Body',
),
),
),
);
}
}

how to custom Tab Bar ? Flutter

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"),
),
),
),
],
),
),
);
}

Resources