I want the container to have title over it like in this picture -

I am using stack and positioned to get the same, but instead I am getting this -

Here is my code -

Expanded(
      child: Stack(
        children: [
          Container(
            ........... //Some Code
          ),
          Positioned(
            left: 0,
            top: 0,
            child: Text("One"),
          ),
        ],0
      )
    ),

If I try to position it with top: -5 or -10, this is what I get -

Is there any widget for this? If no, then I think padding is the only option left with me. What should I do?

CodePudding user response：

Try below code hope its help to you.

InputDecorator(
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Academic Year',
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            value: dropdownValue,
            isDense: true,
            isExpanded: true,
            onChanged: (String? newValue) {
              setState(() {
                dropdownValue = newValue!;
              });
            },
            items: <String>['2021-2022', '2022-2023', '2023-2024', '2024-2025']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ),
      ),

Result screen->

full example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue = '2021-2022';

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: InputDecorator(
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Academic Year',
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            value: dropdownValue,
            isDense: true,
            isExpanded: true,
            onChanged: (String? newValue) {
              setState(() {
                dropdownValue = newValue!;
              });
            },
            items: <String>['2021-2022', '2022-2023', '2023-2024', '2024-2025']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Try set margin for Container

Expanded(
  child: Stack(
    children: [
      Container(
        margin: EdgeInsets.all(5), //add this code 
        ........... //Some Code
      ),
      Positioned(
        left: 0,
        top: 0,
        child: Text("One"),
      ),
    ],0
  )
),

CodePudding user response：

There is a package flutter_titled_container 1.0.7.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text('Titled Container'),
      ),
      body: Center(
        child: TitledContainer(
          titleColor: Colors.blue,
          title: 'Container Title',
          textAlign: TextAlignTitledContainer.Center,
          fontSize: 16.0,
          backgroundColor: Colors.white,
          child: Container(
            width: 250.0,
            height: 200.0,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
            ),
            child: Center(
              child: Text(
                'Some text',
                style: TextStyle(fontSize: 28.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

More details on

CodePudding user response：

Try to add margin.top to container insteads of negative Positioned.top. With the title, using Positioned.top/left/right to determine size and Align to align it to topleft, using Container with color.white to remove border line.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            TitledContainer(
              titleText: 'Hello world!',
              child: Text('Your content place here! Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla'),
            ),
          ],
        ),
      ),
    );
  }
}


class TitledContainer extends StatelessWidget {
  const TitledContainer({required this.titleText, required this.child, this.idden = 8, Key? key}) : super(key: key);
  final String titleText;
  final double idden;
  final Widget child;
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          margin: const EdgeInsets.only(top: 8),
          padding: EdgeInsets.all(idden),
          decoration: BoxDecoration(
            border: Border.all(),
            borderRadius: BorderRadius.circular(idden * 0.6),
          ),
          child: child,
        ),
        Positioned(
          left: 10,
          right: 10,
          top: 0,
          child: Align(
            alignment: Alignment.topLeft,
            child: Container(
              color: Colors.white,
              child: Text(titleText, overflow: TextOverflow.ellipsis),
            ),
          ),
        ),
      ],
    );
  }
}