Flutter textInputField with hintText

Question

I am new to flutter, I have 2 objectives,

I am trying to add an image to the full width of the screen with an exit button on the top right of the image (over the image)
an EditText with hint like in Android:

Could anyone point me to the way to achieve this button on the image (with the set state) and the edit text with an underline (and hint)?

thanks!

Solution for 1: https://www.youtube.com/watch?v=liEGSeD3Zt8 Solution for 2: https://api.flutter.dev/flutter/material/InputBorder-class.html (Read "See also: UnderlineInputBorder, ..." Edit: This answer will give you a hint on how to use InputBorder with TextField: https://stackoverflow.com/questions/54143526/flutter-outline-input-border Take a look at the label/hint property of TextField's decoration — CoderUni, Mar 17 '21 at 06:56

score 1 · Answer 1 · answered Mar 17 '21 at 07:01

1

Solution For Problem 1:

To show the back Button or Icon on top of an image, You should use Stack Widget

Stack(
  children: [
    Container(), // Your image widget here
    IconButton(), // Your Back button here 
  ],
)

Solution For Problem 2:

For the textField issue you should check this doc:

TextField Flutter

TextField(
    decoration: InputDecoration(
        hintText: 'YOUR_HINT_TEXT_HERE',
    ),
)

answered Mar 17 '21 at 07:01

Kishan Dhankecha

957
7
25

but how do I position the icon on the right top of the picture? – Coder123 Mar 17 '21 at 07:07
1

@Coder123 wrap the IconButton(), inside Positioned. For eg : Positioned(top: 8.0. right : 8.0, child : IconButton(),) – Kapil Sahu Mar 17 '21 at 07:11

score 1 · Accepted Answer · answered Mar 17 '21 at 07:17

You can use Stack Widget to display Back button on top of image and for Hint, use TextField( decoration: InputDecoration( hintText: 'Your Hint', ), )

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: StackOverFlowQuestions(),
        ),
      ),
    );
  }
}

class StackOverFlowQuestions extends StatefulWidget {
  @override
  _StackOverFlowQuestionsState createState() => _StackOverFlowQuestionsState();
}

class _StackOverFlowQuestionsState extends State<StackOverFlowQuestions> {
  final TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Appbar title")),
        body: ListView(padding: const EdgeInsets.all(0.0), children: [
          Stack(children: [
            Image(
                image: NetworkImage('https://i.imgur.com/XrJRYCF.png'),
                fit: BoxFit.cover,
                width: MediaQuery.of(context).size.width),
            Positioned.fill(
              child: Container(color: Colors.black.withOpacity(0.25)),
            ),
            Positioned(
                top: 8,
                right: 8,
                child: IconButton(
                  color: Colors.white,
                  icon: Icon(Icons.clear),
                  onPressed: () {},
                ))
          ]),
          Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextFormField(
                  controller: _textEditingController,
                  decoration: InputDecoration(hintText: 'Hello World')))
        ]));
  }
}

score 0 · Answer 3 · answered Mar 17 '21 at 06:53

0

Use the Stack widget. That way you can place any widget on top of another.
Set input decoration on the textfield. Either using the hintText or labelText properties, or both.

answered Mar 17 '21 at 06:53

Robert Sandberg

6,832
2
12
30

Flutter textInputField with hintText

3 Answers3