Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Title is not aligned with the body in Flutter

I am trying to make a align the heading(title) contents with the body that is the list item here .But it is not getting aligned . If i align it and reduce my screen size(I am using flutter web) it gives a render flex.If i use an expanded widget to align it it dosen’t get itself aligned with the body(if I reduce it to half my screen).If i maximise my screen it s getting alligned

I want it to fit even i reduce the screenn size .

How do i do it.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Here is the image:-

enter image description here

Here is my code

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';
import 'Postsc.dart';
late List<Post> drivers;
class MyApp extends StatefulWidget {
// to set the root of app.
  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage1(),
    );
  }
}

class MyHomePage1 extends StatefulWidget {
  late final String title;
  @override
  _MyHomePage1State createState() => _MyHomePage1State();
}

class _MyHomePage1State extends State<MyHomePage1> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Center(
          child: Text("Customer Table",
            style: TextStyle(
              fontWeight: FontWeight.w900,
            ),
          ),
        ),
      ),
      body:Container(
          child: Column(
            children: [
              Row(
                  children: [
                     const Text('Cid',
                          style:TextStyle(
                            fontWeight: FontWeight.w700,
                            fontSize: 20,
                            color: Colors.white,
                          )
                      ),

                    ( SizedBox(width:MediaQuery.of(context).size.width*0.225)),
                    const Text('Cname',
                        style:TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 20,
                          color: Colors.white,
                        )
                    ),
                    ( SizedBox(width:MediaQuery.of(context).size.width*0.20) ),
                    const Text('Cadd',
                        style:TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 20,
                          color: Colors.white,
                        )
                    ),
                    ( SizedBox(width:MediaQuery.of(context).size.width*0.22)),
                    const Text('Ctype',
                        style:TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 20,
                          color: Colors.white,
                        )
                    ),
                  ]
              ),
              Expanded(
                child: Container(
                  child:_buildBody(context),
                ),
              )
            ],
          ),
        color:const Color(0xFF303030),
      ),
      );
  }

  // build list view & manage states
  FutureBuilder<List<Post>> _buildBody(BuildContext context) {
    final HttpService httpService = HttpService();
    return FutureBuilder<List<Post>>(
      future: httpService.getPosts(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final List<Post>? posts = snapshot.data; //marked
          return _buildPosts(context, posts!);
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
  // build list view & its tile
  ListView _buildPosts(BuildContext context, List<Post> posts) {
    return ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemCount: posts.length,
      itemBuilder: (context, index) {
        return Container(
          height:70,
          child: Card(
            shadowColor: Colors.white,
            color:const Color(0xFF303030),
            elevation: 1,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Expanded(
                  child: Container(
                    child: Text(posts[index].Cid,style: const TextStyle(fontWeight: FontWeight.bold,
                      color:Colors.white,),),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Text(posts[index].Cname,style: const TextStyle(fontWeight: FontWeight.bold,
                      color:Colors.white,),),
                  ),),
                Expanded(
                  child: Container(
                    child: Text(posts[index].Cadd,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Text(posts[index].Ctype,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
class HttpService {
  Future<List<Post>> getPosts() async {
    Response res = await get(
        Uri.parse('http://localhost/localconnect/customer_change.php'));
    print(res.body);
    if (res.statusCode == 200) {
      List<dynamic> body = jsonDecode(res.body);
      List<Post> posts = body.map(
            (dynamic item) => Post.fromJson(item),
      ).toList();
      return posts;
    } else {
      throw "Unable to retrieve posts.";
    }
  }
}

>Solution :

Use Expanded instead of using SizedBox and MediaQuery:.

Like so:

Row(
    children: [
      const Expanded(
        child: Text(
          'Cid',
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ),
      const Expanded(
        child: Text(
          'Cname',
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ),
      const Expanded(
        child: Text(
          'Cadd',
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ),
      const Expanded(
        child: Text(
          'Ctype',
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ),
    ],
  )
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading