Flutter positioning hyperlink on appbar

Flutter positioning hyperlink on appbar - android

Is possible to position an hyperlink created with url_launcher on the appbar? Here a screen of what i mean https://ibb.co/X28TzNN "Sito Web" is the hyperlink i want to change position, need move it in the red cirle. Here my AppBar
class BackgroundImage extends StatelessWidget{
final Widget body;
BackgroundImage({this.body});
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Blumax', style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: 'DancingScript',
fontSize: 40
),),
centerTitle: false,
),
body: Stack(
children: <Widget>[Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("assets/whiteimage.jpg"), fit: BoxFit.cover),
),
),
body
]
)
);
}
}
And that's is what i did for position the text in the top right
Widget build(BuildContext context) {
return InkWell(
child: Container(
alignment: Alignment(0.9, -1.0),
child: Text(
_text,
textAlign: TextAlign.right,
style: TextStyle(
fontFamily: 'RobotoMono',
fontSize: 20,
color: Colors.white,
decoration: TextDecoration.underline),
)),
onTap: _launchURL,
);
}
}

#andrea, you don't need to use InkWell/Container. You can use actions in appBar with simple button and try something like this,
class MyAppState extends State<MyApp> {
String _text = 'Link';
String _url = 'https://www.test.com';
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
actions: <Widget>[
FlatButton(
child: Text(_text, style: TextStyle(fontSize: 18.0, color: Colors.white)),
onPressed: _launchURL,
),
IconButton(icon: Icon(Icons.more_vert, color: Colors.white), onPressed: (){})
]
),
body: Padding(
padding: EdgeInsets.all(20.0),
child: Center(
child: Text('')
)
)
)
);
}
_launchURL() async {
if (await canLaunch(_url)) {
await launch(_url);
} else {
throw 'Could not launch $_url';
}
}
}

try actions in AppBar, You can have FlatButton or Inkwell or any Widget that gives you a touch event inside.
appBar: AppBar(
title: Text(Lang.treeView),
actions: <Widget>[
InkWell(
child: Container(
alignment: Alignment(0.9, -1.0),
child: Text(
"ABC",
textAlign: TextAlign.right,
style: TextStyle(
fontFamily: 'RobotoMono',
fontSize: 20,
color: Colors.white,
decoration: TextDecoration.underline),
))),
],
)

Related

How to navigate in flutter?

I was trying the navigator.push but it didn't work. The code executed without errors but my emulator won't navigate when I push the button. I tried all the three methods, the direct navigation with materialrootpage, static navigation with route map, Dynamic Navigation with onGeneratedRoute
import 'package:flutter/material.dart';
import 'submit_id.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Bits mess'
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 5
),),
backgroundColor: Colors.black,
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
child: Image(
image: NetworkImage('https://www.google.com/maps/uv?pb=!1s0x3bbfb9a68009cf11%3A0x312ca93e696b7ee0!3m1!7e115!4shttps%3A%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0%3Dw162-h108-n-k-no!5smess%20food%20-%20Google%20Search!15sCgIgAQ&imagekey=!1e10!2sAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0&hl=en&sa=X&ved=2ahUKEwiuw4HCwsn6AhWc9DgGHWgYCJoQ7ZgBKAF6BAgSEAM#',
scale:0.6 ),
)
),
SizedBox(height: 140,width: 12),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox
(width: 300,
height: 70,
in this widget I used the navigator widget
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Submitid())
);
},
child: Text('Submit ID')),
Ignore from here if you want to
)),
SizedBox(height: 70,width: 10),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox(
width: 300,
height: 70,
child: ElevatedButton(onPressed: () {},
child: Text('Get ID'),
style: ElevatedButton.styleFrom(backgroundColor: Colors.orange),
)),
),
SizedBox(height: 50,width: 10),
]
),
)
)
);
}
}
The screen I want to navigate to
import 'package:flutter/material.dart';
class Submitid extends StatefulWidget {
const Submitid({Key? key}) : super(key: key);
#override
State<Submitid> createState() => _SubmitidState();
}
class _SubmitidState extends State<Submitid> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Bits mess'
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 5
),),
backgroundColor: Colors.black,
centerTitle: true,
),
),
);
}
}

You need to wrap your Scaffold widget in MaterialApp to reach different context. You can extract your Scaffold into a class:
class Home extends StatelessWidget{
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Bits mess',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 5
)),
backgroundColor: Colors.black,
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
child: Image(
image: NetworkImage('https://www.google.com/maps/uv?pb=!1s0x3bbfb9a68009cf11%3A0x312ca93e696b7ee0!3m1!7e115!4shttps%3A%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0%3Dw162-h108-n-k-no!5smess%20food%20-%20Google%20Search!15sCgIgAQ&imagekey=!1e10!2sAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0&hl=en&sa=X&ved=2ahUKEwiuw4HCwsn6AhWc9DgGHWgYCJoQ7ZgBKAF6BAgSEAM#',
scale:0.6 ),
)
),
SizedBox(height: 140,width: 12),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox
(width: 300,
height: 70,
child: ElevatedButton(
onPressed: () =>
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => Submitid()))
,
child: Text('Submit ID')),
)),
SizedBox(height: 70,width: 10),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox(
width: 300,
height: 70,
child: ElevatedButton(onPressed: () {},
child: Text('Get ID'),
style: ElevatedButton.styleFrom(),
)),
),
SizedBox(height: 50,width: 10),
]
),
)
);
}
}
And call this widget in your MaterialApp:
MaterialApp(
home: Home(),
debugShowCheckedModeBanner: false,
)

flutter sqflite how to receive a 'todo' object to display the values?

I am using sqflite to do inserts from OnCreate. Those inserts work fine, and i can visualice the items in a ListView:
But when I touch the item from that list, I get this error:
this is the code of my list that works okay, and where i send the object 'todo' to another screen:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//...
),
here i make conection bd, snapshot, and sending object 'todo':
body: FutureBuilder<List<todo>>(
future: _todo,
builder: (BuildContext context, AsyncSnapshot<List<todo>> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: const CircularProgressIndicator(),
);
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
var items = snapshot.data ?? <todo>[];
return Container(
margin: EdgeInsets.symmetric(
horizontal: 5.0,
vertical: 5.0,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
),
child: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
//HERE I SEND THE OBJECT 'todo' IN INDEX SELECTEDTO DETAILSCREEN
builder: (context) => DetailScreen(td: items[index]),
),
);
},
child: Card(
child: ListTile(
leading: SizedBox(
height: 100.0,
width: 80.0,
child: Image.network(items[index].imgcourse),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
title: Text(
items[index].title,
style: TextStyle(
fontSize: 20,
color: Colors.blueAccent,
),
),
)),
);
},
),
);
}
},
),
);
}
this is the DetailScreen where i receive the 'todo' object:
class DetailScreen extends StatelessWidget {
todo td;
DetailScreen({required this.td});
late DatabaseHandler handler;
late Future<List<todo>> _todo;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
appBar: AppBar(
title: Text(
td.title,
style: TextStyle(
fontSize: 16.0, /*fontWeight: FontWeight.bold*/
),
),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
color: Colors.grey[800],
child: SingleChildScrollView(
child: Column(
children: [
//NAME ITEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Nombre: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.title),
],
),
),
),
SizedBox(
height: 10,
),
// DESCRIPTION TIEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 5.0),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Detalles: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.description),
],
),
),
),
],
),
),
);
),
);
}
}
this is my 'todo' class:
I would like to know how to receive the object and read items inside, im new in sqflite and flutter.

you don´t need to call again the FutureBuilder in "DetailsScream", you have already passed the parameter tb
class DetailScreen extends StatelessWidget {
todo td;
DetailScreen({required this.td});
late DatabaseHandler handler;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
appBar: AppBar(
title: Text(
td.title,
style: TextStyle(
fontSize: 16.0, /*fontWeight: FontWeight.bold*/
),
),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
color: Colors.grey[800],
child: SingleChildScrollView(
child: Column(
children: [
//NAME ITEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Nombre: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.title),
],
),
),
),
SizedBox(
height: 10,
),
// DESCRIPTION TIEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 5.0),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Detalles: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.description),
],
),
),
),
],
),
),
),
);
}
}
Tell if this worked for you

Dialog with top gravity and overlay line in flutter

Trying to make this UI, unable to set gravity or position on dialog. I don't have any idea to make overlay doted line.
class DashboardScreen extends StatefulWidget {
#override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Container(),
appBar: AppBar(centerTitle: false,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
elevation: 0,
title: Text(
"Inventory",
textScaleFactor: 1.3,
style: TextStyle(color: Colors.black87, fontFamily: "light"),
),
actions: [
IconButton(
onPressed: (){},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
),
IconButton(
onPressed: (){},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
),
IconButton(
onPressed: (){
// openAlertBox();
showDialog(context: context,
builder: (_) =>Dialog(
backgroundColor: Colors.transparent,
insetPadding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white
),
padding: EdgeInsets.fromLTRB(20, 50, 20, 20),
child: Text("You can make cool stuff!",
style: TextStyle(fontSize: 24),
textAlign: TextAlign.center
),
),
],
)
));
},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
)
],
),
);
}
}
How it is looking.

Move location of title lower

Currently I am trying to implement a tab controller instead of the list view that I am using in the CategorySelector() function. However, I would like to maintain the same design. How can I move the default text title to the location where the arrow is pointing. and for it to be responsive based on the tab selected.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffDCE3E5),
appBar: AppBar(
title: Text('DISCOVER', style:
TextStyle(color: kOnyx,
fontFamily: 'Baukasten'),),
backgroundColor: kSnow,
leading: IconButton(
icon: Icon(Icons.menu),
iconSize: 30.0,
color: kOnyx,
onPressed: () {},
),
elevation: 0.0,
actions: <Widget>[
FlatButton.icon(
icon: Icon(
Icons.person,
color: kOnyx,
size: 30.0,
),
label: Text('Log Out'),
onPressed: () {
_auth.signOut();
Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
},
),
],
),
body: Column(
children: <Widget>[
Container(
color: kSnow,
padding: EdgeInsets.only(left: 15.0, top: 15.0),
child: FractionallySizedBox(
widthFactor: 1.0,
child: Text(
'DISCOVER',
style: TextStyle(
color: kOnyx,
fontSize: 30.0,
//fontWeight: FontWeight.w600,
fontFamily: 'Baukasten'),
),
),
),
CategorySelector(),
],
),
);
}
}

use tabbarView
for example :)
class _MainPage extends State<MainPage> with SingleTickerProviderStateMixin {
TabController controller;
#override
void initState() {
super.initState();
controller = TabController(length: 3, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('App bar'),
),
body: TabBarView(
children: <Widget>[FirstPage(), SecondPage() , ThirdPage()],
controller: controller,
),
bottomNavigationBar: TabBar(tabs: <Tab>[
Tab(icon: Icon(Icons.looks_one),) ,
Tab(icon: Icon(Icons.looks_two),) ,
Tab(icon: Icon(Icons.looks_3),) , ] ,
controller: controller,),
);
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}

Animating a container as soon as it is added to a widget list (as it appears )

how to animate the added containers as soon as they appear ? ( animation of height going from 0 to containerHeight)
here is a code to illustrate my question:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
List<Widget> widgetList = [Container()];
class _HomeState extends State<Home> {
TextEditingController controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated container'),
backgroundColor: Colors.blue,
),
body: Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Center(
child: Padding(
//shift to left
padding: const EdgeInsets.only(left: 55.0),
child: Row(
children: widgetList.toList(),
),
),
),
],
),
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
add(controller.text);
});
},
color: Colors.blue,
),
FlatButton(
child: Text(
'Clear',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
widgetList.clear();
});
},
color: Colors.blue,
),
TextField(
onChanged: (text) {},
textAlign: TextAlign.center,
controller: controller,
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300),
decoration: InputDecoration(
hintStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.w300),
fillColor: Colors.blue,
filled: true,
),
),
]),
),
);
}
}
void add(String containerHeight) {
widgetList.add(Padding(
padding: const EdgeInsets.all(3.0),
child: AnimatedContainer(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(2.0),
),
duration: Duration(milliseconds: 165),
alignment: Alignment.center,
//color: Colors.red,
height: double.parse(containerHeight),
width: 29.0,
child: Text(
containerHeight,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: containerHeight.length == 1
? 19.0
: containerHeight.length == 2
? 19.0
: containerHeight.length == 3
? 16.0
: containerHeight.length == 4 ? 14.0 : 10.0),
),
)));
}
Screenshot of the ui
You just have to put the height of the container in the text field and press 'add', then the containers will appear directly without animation,
so my question is how to animate so that the height goes from 0 to containerHeight ?
i know it works when the widget is already there and we modify it's height, but i couldn't figure out how to do in that scenario ( adding to a list and displaying it directly ).
thank you.

Try the following code. It is working.
import 'package:flutter/material.dart';
import 'dart:async';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
List<Widget> widgetList = [Container()];
StreamController<String> animationStream = StreamController();
class _HomeState extends State<Home> {
TextEditingController controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated container'),
backgroundColor: Colors.blue,
),
body: Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Center(
child: Padding(
//shift to left
padding: const EdgeInsets.only(left: 55.0),
child: Row(
children: widgetList.toList(),
),
),
),
],
),
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
onPressed: () {
animationStream = StreamController();
setState(() {
add("0");
animationStream.sink.add(controller.text);
});
},
color: Colors.blue,
),
FlatButton(
child: Text(
'Clear',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
widgetList.clear();
});
},
color: Colors.blue,
),
TextField(
onChanged: (text) {},
textAlign: TextAlign.center,
controller: controller,
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300),
decoration: InputDecoration(
hintStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.w300),
fillColor: Colors.blue,
filled: true,
),
),
]),
),
);
}
}
void add(String containerHeight) {
widgetList.add(new MyWidget());
}
class MyWidget extends StatelessWidget {
const MyWidget({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: animationStream.stream,
builder: (context, snapshot) {
String _hight = "0";
if (snapshot.hasData ) {
_hight = snapshot.data;
try { double.parse(_hight);} catch (e) { print('please enter a valid hight');_hight="0"; }
}
return Padding(
padding: const EdgeInsets.all(3.0),
child: AnimatedContainer(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(2.0),
),
duration: Duration(milliseconds: 2165),
alignment: Alignment.center,
//color: Colors.red,
height: double.parse(_hight),
width: 29.0,
child: Text(
_hight,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: _hight.length == 1
? 19.0
: _hight.length == 2
? 19.0
: _hight.length == 3
? 16.0
: _hight.length == 4 ? 14.0 : 10.0),
),
));
},
);
}
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Flutter positioning hyperlink on appbar - android

Related

How to navigate in flutter?

flutter sqflite how to receive a 'todo' object to display the values?

Dialog with top gravity and overlay line in flutter

Move location of title lower

Animating a container as soon as it is added to a widget list (as it appears )

Categories

Resources