Positioning container text up the appbar

Hi, is possible move a container (text) on the appbar? I mean, with the code down below my text go on the top right of the screen, but down the appbar. Is possible put the text on the appbar? Like a title? Here the file with the appbar background_image_task-9.dart

import 'package:flutter/material.dart';

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/blumax.jpg"), fit: BoxFit.cover),
          ),
        ),
          body
         ]
       )
    );
  }
}

And here the file with the container hyperlink.dart

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class Hyperlink extends StatelessWidget {
  final String _url;
  final String _text;

  Hyperlink(this._url, this._text);

  _launchURL() async {
    if (await canLaunch(_url)) {
      await launch(_url);
    } else {
      throw 'Could not launch $_url';
    }
  }

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

Of course i have a main file too, i post it, but i dont think he need to something main.dart

import 'package:flutter/material.dart';
import 'background_image_task-9.dart';
import 'hyperlink.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Blumax',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: myColour
      ),
      home: BackgroundImage(
        body: Center(
          child: Hyperlink('https://flutterforum.co', 'Sito web',),
        ),
      )
    );
  }
}

const MaterialColor myColour = const MaterialColor(
  0xFF0009FF,
  const <int, Color>{
    50: const Color(0xFF0009FF),
    100: const Color(0xFF0009FF),
    200: const Color(0xFF0009FF),
    300: const Color(0xFF0009FF),
    400: const Color(0xFF0009FF),
    500: const Color(0xFF0009FF),
    600: const Color(0xFF0009FF),
    700: const Color(0xFF0009FF),
    800: const Color(0xFF0009FF),
    900: const Color(0xFF0009FF),
  },
);

1 Like

If I have understood right, you want to display ‘Sito Web’ on the AppBar below the title “Blumax” ?

You can do this by using the ‘bottom’ property of “Appbar” .

So your Appbar would be something like this:

Hope it helps.

        appBar: AppBar(
            elevation: 0,
            title: Text(
              'Blumax',
              style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontFamily: 'DancingScript',
                  fontSize: 40),
            ),
            centerTitle: false,
            bottom: PreferredSize(
                preferredSize: Size(MediaQuery.of(context).size.width, 50),
                child: InkWell(
                  child: Container(
                      alignment: Alignment(0.9, -1.0),
                      child: Text(
                        "Sito web",
                        textAlign: TextAlign.right,
                        style: TextStyle(
                            fontFamily: 'RobotoMono',
                            fontSize: 20,
                            color: Colors.black,
                            decoration: TextDecoration.underline),
                      )),
                )))

Hey, thanks for answer! I try your code, didn’t work. Here an example screen of what i mean https://ibb.co/X28TzNN want to change the position of the Hyperlink text “Sito Web” in the position of the red cirle. “Sito Web” is a HyperLink, and i don’t understand how to do that.

Hey, so what issue did you face when you tried the code I shared? As it worked well on my end.

Please share the issue that you are facing.

Hey! Here it is, the issue is that:
i replaced

 child: Text("Sito Web")

with

child: Hyperlink("www.test.com", "Sito Web"),

but now textAlign and style are not defined, how can i fix? Here the code

import 'package:flutter/material.dart';
import 'hyperlink.dart';

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,
      bottom: PreferredSize(
        preferredSize: Size(MediaQuery.of(context).size.width, 50),
        child: InkWell(
          child: Container(
            alignment: Alignment(0.9, -1.0),
            child: Hyperlink("www.test.com", "Sito Web"),
              textAlign: TextAlign.right,
              style: TextStyle(
                fontFamily: 'RobotoMono',
                fontSize: 20,
                color: Colors.black,
                decoration: TextDecoration.underline
              ),
            ),
          ),
        )
      )
    ),
    body: Stack(
      children: <Widget>[Container(
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage("assets/blumax.jpg"), fit: BoxFit.cover),
      ),
    ),
      body
    ]
  )
);
}
}

Up. Anyone can help me? Please

Hey @andrea_pirola . Please try this piece of code for your background_image_task-9.dart file.

import 'package:flutter/material.dart';
import 'package:hello_world/hyperlink.dart';

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,
            bottom: PreferredSize(
                preferredSize: Size(MediaQuery.of(context).size.width, 50),
                child: InkWell(
                  child: Container(
                      alignment: Alignment(0.9, -1.0),
                      child: Hyperlink("www.test.com", "Sito Web")),
                ))),
        body: Stack(children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("assets/blumax.jpg"), fit: BoxFit.cover),
            ),
          ),
          body
        ]));
  }
}

Gave me the result as you can see in the screenshot. Rest of the files are same as you shared the first time.

3 Likes

@andrea_pirola Please do confirm if this resolved your query. :slight_smile:

1 Like

Work perfectly! Thank you!

2 Likes