skip to Main Content

I am doing a personal project using Flutter and I want to modify the location of the ‘title’ text adjacent to the app bar.
I want to make it somewhere between the tree image and the app bar. (Slightly near to the tree would be nice!)

Here’s the code that I am working on right now.

import 'package:app/models/tree_model.dart';
import 'package:flutter/material.dart';

class TreeDesignPage extends StatelessWidget {
  const TreeDesignPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image:
                AssetImage('lib/images/landscape1.jpg'), //the background image
            fit: BoxFit.cover,
          ),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            PageView.builder(
              itemCount: treeModelList.length,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage(treeModelList[index].thumbnailUrl),
                    ),
                  ),
                  child: Text(
                    treeModelList[index].title,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 40),
                  ), //the text that I want to modify its location
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

And here’s the image of the emulator when I ran the code.

emulator

2

Answers


  1. Just wrap the Text widget in a Padding widget.

    Padding(
        padding: const EdgeInsets.only(top: 32),
        child: Text(treeModelList[index].title, ...),
    ),
          
    
    Login or Signup to reply.
  2. Stack is often used with Positioned widget.

    Positioned widget can have it coordinates, so, for instance:

    Stack(
      children: [
        Positioned(
          top: 20, // Draw that text at (0, 20) (20dp from the top)
          child: const Text("Title"),
        ),
      ],
    )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search